图文结合展示--带你掌握 CSS Flex 布局！

咳咳...,之前学过但是有一些细节忘记了，来加深下印象。

Flexbox（弹性盒子）是 CSS3 中为了解决布局问题而引入的强大布局模型。相较于传统布局方式（如 float、inline-block、table），它提供了更灵活、简洁的方式来实现响应式设计。

一、Flex 布局的核心概念

Flex 布局的核心思想是容器决定子项的排列方式。我们需要做两件事：

1. 将一个元素设为 Flex 容器；

2. 通过 Flex 容器和子项上的属性控制排列、对齐、换行等行为。

1. 设置 Flex 容器 

.container {
  display: flex; 
}

这样 .container 就成为了 Flex 容器，子元素自动成为 Flex 项（flex items）。

二、Flex 容器属性（父元素）

1. flex-direction：主轴方向

控制主轴的方向（默认是水平）：

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

• row（默认）：主轴为水平方向，起点在左；

• row-reverse：水平方向，起点在右；

• column：主轴为垂直方向，起点在上；

• column-reverse：垂直方向，起点在下；

 2. flex-wrap：是否换行

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

• nowrap（默认）：不换行；

• wrap：子项超出时自动换行；

• wrap-reverse：换行，但行的方向与正常相反；

 3. justify-content：主轴对齐方式

控制子项在主轴上的对齐：

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

• flex-start：起点对齐；

• 

• center：居中；

• 

• space-between：两端对齐，间距平均；

• 

• space-around：每个子项两侧间距相等；

• 

• space-evenly：子项之间及边缘间距完全相等；与space-around有点不同，所有的间隙都相等

• 

 4. align-items：交叉轴对齐方式

控制子项在交叉轴上的对齐（单行时）：

.container {
  align-items:  flex-start | flex-end | center 
}

• flex-start:

• 

• flex-end ：

• 

• center：交叉轴居中；

• 

6. align-content：多行时交叉轴对齐方式 

类似于 align-items，但作用于多行：

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

 stretch（默认）：拉伸填满交叉轴；

 flex-start:

flex-end:

 center:

space-between

space-around:

 三、Flex 项属性（子元素）

1. order：排列顺序

.item {
  order: 0; /* 默认为 0，数值越小越靠前 */
}

2. flex-grow：放大比例

表示可分配剩余空间的比例。例如三个子项都设为 1，则平均分配剩余空间

.item {
  flex-grow: 1;
}

3. flex-shrink：缩小比例

是不是有点难理解，想象你和朋友一起坐一张长椅（容器），但这张椅子空间不够，你们必须都挤一下。

• 你说：“我可以缩一点，比例是 1”

• 你朋友说：“我比较瘦，我可以缩多点，比例是 3”

那么：你压缩一点，他压缩三倍——这就是 flex-shrink 的按比例机制。

.item {
  flex-shrink: 1;
}

当空间不足时，按比例压缩子项。默认值为 1，设为 0 则不缩小。

4. flex-basis：初始主轴尺寸

flex-basis 决定了 Flex 项的“初始主轴尺寸”，也就是在参与 flex-grow 和 flex-shrink 计算前，它应该占据多少空间。

.item {
  flex-basis: 200px;
  flex-grow: 1;
}

这里 flex-basis: 200px 表示：

• 每个 .item 一开始就“想占”200px；

• 然后再根据容器的剩余空间决定是否继续变大（flex-grow）；

5. flex：flex-grow、flex-shrink 和 flex-basis 的简写

.item {
  flex: 1 0 100px;
}
/
.item {
  flex: 1; /* 等同于 flex: 1 1 0% */
}

他们的默认值！！！，这是很重要的，Flex 项属性在未设置时的默认值会直接影响布局行为，很多“莫名其妙”的排版问题其实就是因为默认值没理解清楚。

 Flex 项属性默认值汇总（子元素）