Flexbox 布局的核心概念和应用

Flexbox（Flexible Box）布局是CSS3中提供的一种一维布局模型，主要用于在容器内分布元素（称为flex items）以及对它们在主轴（main axis）和交叉轴（cross axis）上进行排列和对齐，适合实现灵活的响应式设计。Flexbox的核心概念包括两个部分：容器（容器设置 display: flex 后成为flex container）和内部直接子元素（成为flex items）。

以下从面试角度重点解释Flexbox的核心特性、使用方法和常见应用场景：

一. 容器属性

容器属性定义了flex容器的整体行为：

1. flex-direction：定义主轴方向，影响items排列顺序。

   .container {
     flex-direction: row; /* 从左到右排列 (默认) */
     /* 其它值: row-reverse (反向左到右), column (从上到下), column-reverse (反向下到上) */
   }
   

2. flex-wrap：控制当items超出容器是否换行。

   .container {
     flex-wrap: wrap; /* 超出则换行 */
     /* 其它值: nowrap (不换行), wrap-reverse (方向换行) */
   }
   

3. justify-content：设置items在主轴上的对齐方式。

   .container {
     justify-content: center; /* 居中对齐 */
     /* 其它值: flex-start (起始对齐), flex-end (结尾对齐), space-between (首尾贴边), space-around (等距均分) */
   }
   

4. align-items：控制items在单行情况下的交叉轴对齐。

   .container {
     align-items: stretch; /* 拉伸填充交叉轴高度 (默认) */
     /* 其它值: flex-start (顶部对齐), flex-end (底部对齐), center (居中对齐), baseline (baseline对齐) */
   }
   

5. align-content：当有多行items时，在交叉轴上的整体对齐（flex-wrap: wrap时有效）。

   .container {
     align-content: space-around; /* 多行等距分布 */
     /* 其它值: flex-start, center, flex-end, space-between等 */
   }
   

6. flex-flow：是 flex-direction 和 flex-wrap 的简写，默认 row nowrap。

   .container {
     flex-flow: column wrap; /* 例如设置主轴从上到下, 换行布局 */
   }
   

二. Items 属性

items 属性直接作用于 flex 容器内的子元素：

1. flex-grow：定义 item 占用多余空间的比例增长系数（默认值 0）。

   .item {
     flex-grow: 1; /* 允许放大；所有元素为1则等分剩余空间 */
   }
   

2. flex-shrink：设置item缩减系数，当空间不足时item压缩比例（默认值 1）。

   .item {
     flex-shrink: 0; /* 空间不足时禁止压缩 */
   }
   

3. flex-basis：设置item在主轴方向上的初始大小，覆盖width或height。

   .item {
     flex-basis: 100px; /* 定义初始主轴大小,可用百分比或具体尺寸如auto */
   }
   

4. flex：是 flex-grow、flex-shrink 和 flex-basis 的简写（默认 0 1 auto）。

   .item {
     flex: 1 0 auto; /* 等同于 grow:1, shrink:0, basis:auto */
   }
   

5. align-self：覆盖容器 align-items，单独调整items在交叉轴位置。

   .item {
     align-self: center; /* 设置该项居中对齐 */
   }
   

6. order：更改item显示顺序（数值小的排前面）。

   .item:nth-child(1) {
     order: 2; /* 改变视觉顺序,如值为1的排在值为2前 */
   }
   

三. 优势与场景

• 优势：简化动态布局编码，自动处理项目尺寸变化，适应不同屏幕尺寸（响应式设计）。
• 应用场景:
  1. 居中对齐元素（如页面居中块）。
  2. 弹性导航菜单（根据内容自动填空间）。
  3. 卡片式布局（项目平分布局）。

该布局方案在主流浏览器上具有良好支持（但需考虑旧浏览器前缀问题）。