1. Flex 布局简介
Flex（弹性盒子）布局是现代 CSS 中最灵活和强大的布局方案之一。它可以轻松地创建复杂的响应式布局，并且能够自动调整元素大小和位置。
基本概念
Flex 布局包含两个关键角色：
- 容器（Flex Container）：使用
display: flex声明的父元素 - 项目（Flex Items）：容器内的直接子元素
2. 开启 Flex 布局
使用非常简单，只需在父元素上添加 display: flex：
.container {
display: flex;
}3. 主轴和交叉轴
Flex 布局的核心是主轴（main axis）和交叉轴（cross axis）：
- 主轴：默认水平方向
- 交叉轴：默认垂直方向
4. 容器属性详解
4.1 flex-direction
控制主轴方向，有四个可选值：
row（默认）：水平从左到右row-reverse：水平从右到左column：垂直从上到下column-reverse：垂直从下到上
示例：
.container {
display: flex;
flex-direction: column;
}4.2 justify-content
定义项目在主轴上的对齐方式：
flex-start：起点对齐flex-end：终点对齐center：居中space-between：两端对齐space-around：每个项目两侧间距相等
.container {
display: flex;
justify-content: center;
}4.3 align-items
定义项目在交叉轴的对齐方式：
stretch（默认）：拉伸填充flex-start：起点对齐flex-end：终点对齐center：居中baseline：首行文字基线对齐
.container {
display: flex;
align-items: center;
}4.4 flex-wrap
控制项目是否换行：
nowrap（默认）：不换行wrap：换行wrap-reverse：反向换行
.container {
display: flex;
flex-wrap: wrap;
}5. 项目属性详解
5.1 flex-grow
定义项目的放大比例，默认为 0：
.item {
flex-grow: 1; /* 所有项目等分空间 */
}5.2 flex-shrink
定义项目的缩小比例，默认为 1：
.item {
flex-shrink: 0; /* 不允许缩小 */
}5.3 flex-basis
定义项目初始大小：
.item {
flex-basis: 200px; /* 初始宽度为 200px */
}5.4 align-self
允许单个项目有不同的对齐方式：
.item {
align-self: flex-end; /* 与其他项目不同的对齐 */
}6. 实际应用场景
6.1 居中布局
.center-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}6.2 导航菜单
.nav {
display: flex;
justify-content: space-between;
align-items: center;
}7. 兼容性
目前，Flex 布局在主流浏览器中已得到很好的支持。对于旧版浏览器，可能需要添加前缀或使用 display: -webkit-flex。
8. 总结
Flex 布局是现代 Web 开发中不可或缺的技术。它简单、灵活，能够快速解决许多传统布局方案中的复杂问题。
通过本教程，你应该已经对 Flex 布局有了全面的认识。建议多练习，熟悉各个属性的使用，相信你很快就能成为 Flex 布局的高手！
使用htmlpage，在线快速创建网页：https://htmlpage.cn/builder
