【CSS】flex布局
Flex 布局（也称为 弹性盒子布局）。
Flexible Box 模型，通常称为 Flexbox，是一种为一维布局设计的 CSS 布局模式。它旨在提供一种更有效的方式来对容器中的元素进行排列、对齐和分配空间，即使它们的大小是未知或动态的。
文章目录
- 一、什么是 Flex 布局？
- 二、基本概念和术语
- 三、Flex 容器的属性（作用于父元素）
- 四、Flex 项目的属性（作用于子元素）
- 五、一个完整的示例
- 总结
一、什么是 Flex 布局？
核心思想：通过赋予容器控制其子元素（弹性项目）高度/宽度和顺序的能力，来填充可用空间。其核心是让容器能够改变其子项目的宽度、高度和顺序，以最佳方式填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。
主要特征：
- 一维布局：Flex 布局一次只能处理一个维度（行或列）上的布局。这与处理行和列的 CSS Grid（二维布局）形成对比。
- 两个轴：Flex 布局基于主轴和交叉轴。
- 主轴：由
flex-direction属性定义的方向（默认为水平，从左到右）。 - 交叉轴：与主轴垂直的方向。
- 主轴：由
二、基本概念和术语
要使用 Flex 布局，你需要理解两个基本组件：
- Flex 容器：设置了
display: flex或display: inline-flex的父元素。 - Flex 项目：Flex 容器内的直接子元素。
<div class="flex-container"> <!-- Flex 容器 --><div class="flex-item">项目 1</div> <!-- Flex 项目 --><div class="flex-item">项目 2</div> <!-- Flex 项目 --><div class="flex-item">项目 3</div> <!-- Flex 项目 -->
</div>
三、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%。（常用，平均分配空间）
五、一个完整的示例
<!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 布局是前端开发者的必备技能。