Flex布局（Flexible Box Layout）

Flex布局（Flexible Box Layout） 是一种 CSS 布局模式，专为页面中复杂的对齐、分布需求而设计，特别适用于动态适配的响应式布局。它能让子元素在父容器中灵活地排列，支持横向和纵向布局，并提供精确的对齐和空间分配。

---

基本语法

1. 设置父容器为 Flex 容器：
   css

   复制代码

   display: flex;
2. 关键属性：
   • 父容器属性：
     • flex-direction: 定义主轴方向（元素排列方向）。
     • justify-content: 定义主轴上的对齐方式。
     • align-items: 定义交叉轴上的对齐方式。
     • align-content: 多行内容的交叉轴对齐方式。
     • flex-wrap: 是否换行。
   • 子元素属性：
     • flex: 设置子元素的比例。
     • align-self: 设置单个子元素在交叉轴上的对齐方式。

---

核心属性解析

1. 父容器的属性

属性	取值	说明
display	flex 或 inline-flex	定义容器为 Flex 布局
flex-direction	row, row-reverse, column, column-reverse	定义主轴方向
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly	主轴方向的对齐方式
align-items	flex-start, flex-end, center, baseline, stretch	定义单行在交叉轴的对齐方式
flex-wrap	nowrap, wrap, wrap-reverse	是否换行
align-content	flex-start, flex-end, center, space-between, space-around, stretch	多行的交叉轴对齐方式（有换行时生效）

2. 子元素的属性

属性	取值	说明
flex	none, <number>	设置元素的比例，如 1 表示占剩余空间的一份
align-self	与 align-items 类似	允许子元素覆盖父容器的 align-items 设置
order	数字，默认为 0	定义排列顺序，数字越小越靠前

---

Flex 布局示例

示例 1：基本布局

html

复制代码

<div style="display: flex; justify-content: space-between; align-items: center; height: 100px; border: 1px solid #ccc;"> <div style="background: red; width: 50px; height: 50px;"></div> <div style="background: green; width: 50px; height: 50px;"></div> <div style="background: blue; width: 50px; height: 50px;"></div> </div>

效果：

• 元素在主轴（水平）上平均分布。
• 子元素在交叉轴（垂直）上居中。

---

示例 2：换行布局

html

复制代码

<div style="display: flex; flex-wrap: wrap; gap: 10px; border: 1px solid #ccc;"> <div style="background: red; width: 100px; height: 50px;"></div> <div style="background: green; width: 100px; height: 50px;"></div> <div style="background: blue; width: 100px; height: 50px;"></div> <div style="background: yellow; width: 100px; height: 50px;"></div> </div>

效果：

• 子元素超出父容器宽度时自动换行。
• 元素之间有 10px 的间距。

---

示例 3：自适应布局

html

复制代码

<div style="display: flex; height: 100px; border: 1px solid #ccc;"> <div style="flex: 1; background: red;"></div> <div style="flex: 2; background: green;"></div> <div style="flex: 3; background: blue;"></div> </div>

效果：

• 每个子元素根据 flex 值占比例的空间（1:2:3）。

---

常见场景

1. 水平居中

css

复制代码

display: flex; justify-content: center; align-items: center;

2. 两端对齐

css

复制代码

display: flex; justify-content: space-between;

3. 垂直排列（列布局）

css

复制代码

display: flex; flex-direction: column;

4. 响应式网格布局

html

复制代码

<div style="display: flex; flex-wrap: wrap; gap: 10px;"> <div style="flex: 1 1 200px; background: lightgray;">Box 1</div> <div style="flex: 1 1 200px; background: gray;">Box 2</div> <div style="flex: 1 1 200px; background: darkgray;">Box 3</div> </div>

---

注意事项

1. 子元素的默认宽高：未设置 width 或 height 时，子元素会自动适应内容。
2. Flex 容器的尺寸限制：确保父容器有明确的宽高，避免布局错乱。
3. 兼容性：Flex 布局在现代浏览器中有较好支持，但需检查旧版 IE（需加前缀 -ms-）。

Flex 是现代布局的强大工具，适合各种复杂的页面布局需求！