flex布局属性

一、Flex布局容器（父元素）的属性

1. display: flex

• 作用：将元素声明为flex容器，子元素变为flex项目，默认横向排列。
• 场景：任何需要弹性布局的容器（如导航栏、卡片列表）。

2. flex-direction

• 作用：定义子元素的排列方向。
• 值：
  • row（默认）：水平从左到右排列。
  • row-reverse：水平从右到左排列。
  • column：垂直从上到下排列。
  • column-reverse：垂直从下到上排列。
• 场景：适配移动端时将水平布局转为垂直布局。

3. flex-wrap

• 作用：控制子元素超出容器时是否换行。
• 值：
  • nowrap（默认）：不换行，子元素可能被压缩。
  • wrap：换行，第一行在上方。
  • wrap-reverse：换行，第一行在下方。
• 场景：图片画廊需要自适应换行显示。

4. justify-content

• 作用：定义子元素在主轴（flex-direction方向）上的对齐方式。
• 值：
  • flex-start（默认）：左对齐。
  • flex-end：右对齐。
  • center：居中。
  • space-between：两端对齐，中间间距相等。
  • space-around：每个子元素两侧间距相等（总间距是中间的两倍）。
  • space-evenly：每个子元素间距相等。
• 场景：导航栏按钮居中、底部按钮两端对齐。

5. align-items

• 作用：定义子元素在交叉轴（垂直于主轴方向）上的对齐方式。
• 值：
  • stretch（默认）：拉伸填满容器（需子元素无固定高度）。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：垂直居中。
  • baseline：基于文本基线对齐。
• 场景：卡片内容垂直居中显示。

6. align-content

• 作用：当子元素多行显示时，定义行与行之间的对齐方式（单行布局无效）。
• 值：
  • stretch（默认）：拉伸行高填满容器。
  • flex-start：顶部对齐。
  • flex-end：底部对齐。
  • center：垂直居中。
  • space-between：两端对齐，行间距相等。
  • space-around：行两侧间距相等。
• 场景：多行文本框的行间距控制。

二、Flex布局项目（子元素）的属性

1. flex-grow

• 作用：定义子元素的放大比例（默认0，不放大）。
• 示例：flex-grow: 1表示剩余空间按比例分配给该元素。
• 场景：搜索框左侧图标固定宽度，输入框自适应填充剩余空间。

2. flex-shrink

• 作用：定义子元素的缩小比例（默认1，可缩小）。
• 示例：flex-shrink: 0表示元素不缩小，避免内容被截断。
• 场景：图片元素设置flex-shrink: 0防止压缩变形。

3. flex-basis

• 作用：定义子元素在主轴上的初始尺寸。
• 值：
  • 具体数值（如200px）：固定尺寸。
  • auto（默认）：基于width/height属性。
  • 0%：忽略width/height，完全由flex-grow和flex-shrink决定。
• 场景：列表项设置flex-basis: 25%实现4列布局。

4. flex

• 作用：flex-grow、flex-shrink、flex-basis的缩写（推荐使用）。
• 常见写法：
  • flex: 1：flex: 1 1 0%（等比例放大缩小）。
  • flex: auto：flex: 1 1 auto（基于内容自适应）。
  • flex: none：flex: 0 0 auto（固定尺寸，不缩放）。
• 场景：快速实现自适应布局，避免单独设置三个属性。

5. order

• 作用：定义子元素的排列顺序（默认0，数值越小越靠前）。
• 场景：移动端将导航栏右侧按钮提前到左侧显示。

6. align-self

• 作用：覆盖容器的align-items，单独设置子元素的交叉轴对齐方式。
• 值：与align-items相同（如flex-start、center等）。
• 场景：某列表项需要底部对齐，其他项顶部对齐。

三、结合场景扩展

1. 兼容性处理：

   • 需添加浏览器前缀（如-webkit-flex、-ms-flex）。
   • IE10+支持display: flex，IE9及以下需用display: inline-block等替代方案。

2. 性能优化：

   • 避免多层嵌套flex容器，减少布局计算开销。
   • 复杂布局可结合grid布局（如二维网格场景）。

3. 典型场景：

   • 圣杯布局：左右固定宽度，中间自适应（flex: 1）。
   • 垂直居中：display: flex; align-items: center; justify-content: center。
   • 响应式布局：通过媒体查询切换flex-direction实现移动端适配。