Flex 布局 （也称为 弹性盒子布局）。
Flexible Box 模型，通常称为 Flexbox，是一种为一维布局设计的 CSS 布局模式。它旨在提供一种更有效的方式来对容器中的元素进行排列、对齐和分配空间，即使它们的大小是未知或动态的。
文章目录
一、什么是 Flex 布局？
核心思想：通过赋予容器控制其子元素（弹性项目）高度/宽度和顺序的能力，来填充可用空间。其核心是让容器能够改变其子项目的宽度、高度和顺序，以最佳方式填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。
主要特征：
- 一维布局：Flex 布局一次只能处理一个维度（行或列）上的布局。这与处理行和列的 CSS Grid（二维布局）形成对比。
- 两个轴 ：Flex 布局基于主轴 和交叉轴 。
- 主轴 ：由
flex-direction属性定义的方向（默认为水平，从左到右）。 - 交叉轴：与主轴垂直的方向。
- 主轴 ：由
二、基本概念和术语
要使用 Flex 布局，你需要理解两个基本组件：
-
Flex 容器 ：设置了
display: flex或display: inline-flex的父元素。 -
Flex 项目：Flex 容器内的直接子元素。
项目 1项目 2项目 3
三、Flex 容器的属性（作用于父元素）
这些属性控制着容器内所有项目的整体行为。
| 属性 | 作用 | 常用值 |
|---|---|---|
display |
定义一个 Flex 容器。 | flex（块级容器） inline-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 |
定义了多根轴线的对齐方式（多行）。如果项目只有一根轴线，该属性不起作用。 | stretch, flex-start, flex-end, center, space-between, space-around, space-evenly |
flex-flow 简写属性 ：是 flex-direction 和 flex-wrap 的简写形式。
- 语法：
flex-flow: <flex-direction> || <flex-wrap>; - 示例：
flex-flow: row wrap;
四、Flex 项目的属性（作用于子元素）
这些属性控制单个项目在容器内的行为。
| 属性 | 作用 | 常用值 |
|---|---|---|
order |
定义项目的排列顺序。数值越小，排列越靠前，默认为 0。 | <integer>（整数，如 -1, 0, 1, 2） |
flex-grow |
定义项目的放大比例，默认为 0（即如果存在剩余空间，也不放大）。 | <number>（数字，如 0, 1, 2） |
flex-shrink |
定义项目的缩小比例，默认为 1（即如果空间不足，该项目将缩小）。 | <number>（数字，如 0, 1, 2） |
flex-basis |
定义在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性计算是否有多余空间。 | auto（默认，项目本来的大小）, 长度值（如 20%, 250px） |
align-self |
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。 |
auto（继承父容器的 align-items）, stretch, flex-start, flex-end, center, baseline |
flex 简写属性 ：是 flex-grow, flex-shrink 和 flex-basis 的简写。
- 语法：
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] - 推荐使用简写，因为它可以智能地设置其他值。
- 常用值：
flex: initial：等同于flex: 0 1 auto。（不放大，可缩小，初始大小）flex: auto：等同于flex: 1 1 auto。（可放大，可缩小）flex: none：等同于flex: 0 0 auto。（不放大，不缩小）flex: 1：等同于flex: 1 1 0%。（常用，平均分配空间）
五、一个完整的示例
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
.container {
display: flex; /* 定义 Flex 容器 */
flex-direction: row; /* 主轴为水平方向 */
flex-wrap: wrap; /* 允许换行 */
justify-content: space-around; /* 主轴对齐方式 */
align-items: center; /* 交叉轴对齐方式（单行） */
height: 200px;
background-color: #f0f0f0;
}
.item {
flex: 1; /* 每个项目可伸缩，平均分配空间 */
min-width: 100px; /* 设置最小宽度，防止过小 */
height: 60px;
margin: 10px;
background-color: tomato;
text-align: center;
line-height: 60px;
color: white;
}
.item-special {
flex: 2; /* 这个项目占据的空间是其他的两倍 */
background-color: steelblue;
align-self: flex-end; /* 这个项目自己底部对齐 */
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item item-special">3 (特殊)</div>
<div class="item">4</div>
</div>
</body>
</html>总结
Flex 布局是现代 CSS 的基石，它极大地简化了以往非常棘手的布局问题（如垂直居中、等高布局、圣杯布局等）。掌握 Flex 布局是前端开发者的必备技能。