Flex布局通过设置display: flex开启，利用主轴与交叉轴控制元素排列，使用justify-content和align-items实现对齐，结合flex-wrap处理换行，通过flex-grow、flex-shrink和flex-basis灵活分配空间，实现响应式布局。
Flex布局（Flexible Box Layout）是CSS3中一种全新的布局模式，用来更高效地在容器中分配空间和对齐元素。它特别适合响应式设计和动态尺寸的界面布局。下面详细介绍如何在HTML5中使用Flex布局。
1. 开启Flex布局
要使用Flex布局，首先要为父容器设置display: flex或display: inline-flex。
display: flex：使容器成为块级弹性容器，子元素按弹性规则排列。
display: inline-flex：使容器成为行内弹性容器，类似于inline-block行为。
立即学习“前端免费学习笔记（深入）”；
- 推荐使用
display: flex进行整体布局控制。 - 一旦设置了flex，容器内的直接子元素自动成为“flex项目”（flex items）。
示例代码：
.container {
display: flex;
}
2. 主轴与交叉轴的概念
Flex布局基于两个轴：主轴（main axis）和交叉轴（cross axis）。
主轴方向由flex-direction决定，默认是横向从左到右（row）。
交叉轴垂直于主轴。例如主轴是横向时，交叉轴就是纵向。
- flex-direction 可设为：
row、row-reverse、column、column-reverse。 - justify-content 控制主轴上的对齐方式。
- align-items 控制交叉轴上的对齐方式。
示例：
.container {
display: flex;
flex-direction: row; /* 默认值 */
}
3. 常用容器属性详解
Flex容器支持多个关键属性来控制子元素的排列方式。
justify-content：定义项目在主轴上的对齐方式。
-
flex-start：左对齐（默认） -
flex-end：右对齐 -
center：居中 -
space-between：两端对齐，项目之间间距相等 -
space-around：每个项目两侧间距相等 -
space-evenly：项目间及边缘间距完全相等
align-items：定义项目在交叉轴上的对齐方式。
-
stretch：拉伸填满容器（默认） -
flex-start：顶部对齐 -
flex-end：底部对齐 -
center：居中对齐 -
baseline：文字基线对齐
flex-wrap：控制是否换行。
-
nowrap：不换行（默认） -
wrap：换行，第一行在上方 -
wrap-reverse：换行，第一行在下方
示例：
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
4. 常用项目属性详解
除了容器属性，每个子项目也可以单独设置样式。
flex-grow：定义项目的放大比例，默认为0（不放大）。
- 若所有项目flex-grow都为1，则等分剩余空间。
- 某个项目为2，其他为1，则前者占据更多空间。
flex-shrink：定义项目的缩小比例，默认为1（空间不足时自动缩小）。
- 设为0则不缩小。
flex-basis：定义项目在分配空间前的初始大小，类似width。
- 可设为像素值（如200px）或百分比（如50%）。
简写属性 flex：推荐使用flex同时设置grow、shrink、basis。
-
flex: 1相当于flex: 1 1 0 -
flex: 2表示该项目占两份空间
示例：
.item {
flex: 1;
}
这会让所有项目等宽填充容器。
基本上就这些。掌握这几个核心属性，就能灵活实现各种布局效果，比如居中、等分布局、侧边栏自适应等。实际开发中建议结合浏览器开发者工具调试查看效果。不复杂但容易忽略细节。
