为什么选择Flexbox？

CSS Flexbox（弹性盒子布局）是CSS3引入的一维布局模型，专门解决传统布局方案（浮动、定位、表格布局）的各种痛点。使用Flexbox，你可以轻松实现：垂直居中（不再需要各种hack）；等高列布局（不需要假背景图）；灵活的排列方向（一行代码从横向改为纵向）；剩余空间分配（auto margin的终极替代）。

核心概念：容器和项目

Flexbox布局涉及两个层级：容器（flex container）和项目（flex item）。容器设置display: flex后，其直接子元素自动成为项目。容器的属性控制整体排列方式，项目的属性控制个体的伸缩行为。

容器属性详解

  • flex-direction：主轴方向。row（默认，水平从左到右）、row-reverse（水平从右到左）、column（垂直从上到下）、column-reverse（垂直从下到上）
  • flex-wrap：是否换行。nowrap（默认，不换行，可能溢出）、wrap（换行）、wrap-reverse（反向换行）
  • justify-content：主轴对齐。flex-start、flex-end、center、space-between、space-around、space-evenly
  • align-items：交叉轴对齐。stretch（默认，拉伸）、flex-start、flex-end、center、baseline
  • align-content：多行交叉轴对齐（仅在wrap时有效）
  • gap：项目间距（替代margin的简洁方案）

项目属性详解

  • flex-grow：放大比例。默认0（不放大），设为1则等分剩余空间。
  • flex-shrink：缩小比例。默认1（空间不足时等比缩小），设为0则不缩小。
  • flex-basis：初始大小。默认auto（由内容决定），可以设为固定值或百分比。
  • flex：以上三者的简写。推荐使用flex: 1代替flex: 1 1 0%。
  • align-self：单独设置交叉轴对齐，覆盖容器的align-items。
  • order：排列顺序。默认0，数值越小越靠前。

5个经典布局模式

  1. 完美居中：容器设置display:flex; justify-content:center; align-items:center;
  2. 等分导航栏：项目设置flex:1，自动等宽分配
  3. 侧边栏+主内容：侧边栏固定宽度（flex:0 0 200px），主内容自适应（flex:1）
  4. 粘性页脚：容器设置min-height:100vh; flex-direction:column; 主内容设置flex:1
  5. 圣杯布局：结合flex-wrap和order属性实现经典三栏布局

工具推荐

使用我们的在线CSS Flexbox生成器，可视化调整属性，实时预览布局效果，一键生成CSS代码，帮助你快速掌握Flexbox布局。