【前端】【css】flex布局详解

Flex 布局（Flexible Box Layout，弹性盒子布局）是 CSS3 中的一种布局模式，用于在容器中更高效地分配空间并对齐内容，即使它们的大小是动态未知的。它非常适用于响应式设计。

---

一、Flex 布局的基本概念

1. 启用 Flex 布局

• 只需要给父容器设置：

display: flex;

• 或者：

display: inline-flex;  /* 行内弹性盒子 */

2. 容器与项目

• 容器（Flex Container）：设置了 display: flex 的元素。
• 项目（Flex Item）：容器内的直接子元素。

---

二、主轴和交叉轴

• 主轴（Main Axis）：项目排列的方向，默认是水平方向（从左到右）。
• 交叉轴（Cross Axis）：与主轴垂直的方向。

---

三、Flex 容器的属性（作用于父元素）

1. flex-direction：主轴方向

值	说明
row（默认）	主轴为水平方向，起点在左
row-reverse	主轴为水平方向，起点在右
column	主轴为垂直方向，起点在上
column-reverse	主轴为垂直方向，起点在下

2. flex-wrap：是否换行

值	说明
nowrap（默认）	不换行
wrap	换行，第一行在上方
wrap-reverse	换行，第一行在下方

3. flex-flow：flex-direction + flex-wrap 的简写

flex-flow: row wrap;

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

值	说明
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	间距相等
space-evenly	间距全部相等

---

四、Flex 项目的属性（作用于子元素）

1. order：定义排列顺序

.order { order: 1; }

值越小，越靠前，默认是 0。

2. flex-grow：放大比例

.flex-grow { flex-grow: 1; }

所有项目的 flex-grow 总和决定空间分配比例。

3. flex-shrink：缩小比例

.flex-shrink { flex-shrink: 1; }

为负空间时如何缩小，默认是 1。

4. flex-basis：项目在主轴上的初始大小

.flex-basis { flex-basis: 100px; }

5. flex：简写属性，包含 grow、shrink、basis

flex: 1 0 100px;

通常写法：

• flex: 1; 等价于 flex: 1 1 0%
• flex: auto; 等价于 flex: 1 1 auto
• flex: none; 等价于 flex: 0 0 auto

6. align-self：单独设置某个项目在交叉轴上的对齐方式（覆盖 align-items）

---

五、常见使用场景举例

1. 水平居中 + 垂直居中

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

2. 两端对齐，中间自适应

.left { flex: 0 0 auto; }
.middle { flex: 1; }
.right { flex: 0 0 auto; }

---

总结

Flex 是一种强大且灵活的布局方式，核心在于：

• 设置主轴方向（flex-direction）
• 控制项目在主轴/交叉轴的对齐方式
• 利用 flex 属性实现伸缩布局
• 响应式设计中的利器