CSS Flex 布局总结
Flexbox（弹性盒子布局）是 CSS3 中一种强大的布局模型，可以轻松实现各种复杂的页面布局。以下是 Flex 布局的核心知识点总结：
基本概念
- Flex 容器：通过
display: flex或display: inline-flex声明的元素 - Flex 项目：Flex 容器内的直接子元素
- 主轴（Main Axis） ：Flex 项目的默认排列方向
- 交叉轴（Cross Axis） ：与主轴垂直的方向
Flex 容器属性
1. 主轴方向
css
flex-direction: row | row-reverse | column | column-reverse;
- 决定 Flex 项目的排列方向
- 默认值：
row（水平从左到右）
2. 换行方式
css
flex-wrap: nowrap | wrap | wrap-reverse;
- 控制 Flex 项目是否换行
- 默认值：
nowrap（不换行）
3. 主轴对齐方式 ★★★
css
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
- 控制 Flex 项目在主轴上的对齐方式
- 默认值：
flex-start（从起点开始排列）
4. 交叉轴对齐方式（单行）
css
align-items: stretch | flex-start | flex-end | center | baseline;
- 控制 Flex 项目在交叉轴上的对齐方式
- 默认值：
stretch（拉伸填满容器高度）
5. 交叉轴对齐方式（多行）
css
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
- 多行 Flex 项目在交叉轴上的对齐方式
- 默认值：
stretch（拉伸填满容器高度）
6. 简写属性
css
flex-flow: <flex-direction> <flex-wrap>;
- 组合
flex-direction和flex-wrap的简写形式 - 默认值：
row nowrap
Flex 项目属性
1. 排列顺序
css
order: <integer>;
- 控制 Flex 项目的排列顺序
- 数值越小，排列越靠前
- 默认值：0
2. 放大比例--flex-grow
css
flex-grow: <number>;
- 定义 Flex 项目的放大比例
- 当容器有剩余空间时，按比例分配
- 默认值：0（不放大）
3. 缩小比例--flex-shrink
css
flex-shrink: <number>;
- 定义 Flex 项目的缩小比例
- 当容器空间不足时，按比例缩小
- 默认值：1（等比例缩小）
4. 基础尺寸--flex-basis
css
flex-basis: <length> | auto;
- 定义 Flex 项目在分配多余空间之前的初始大小
- 默认值：
auto（项目本来的大小）
5. 简写属性
css
flex: none | [ <flex-grow> <flex-shrink>? || <flex-basis> ];
-
组合
flex-grow,flex-shrink和flex-basis的简写形式 -
常用值：
flex: 1→flex: 1 1 0%flex: auto→flex: 1 1 autoflex: none→flex: 0 0 auto
-
默认值：
0 1 auto
6. 单独对齐方式
css
align-self: auto | flex-start | flex-end | center | baseline | stretch;
- 允许单个 Flex 项目有与其他项目不一样的对齐方式
- 默认值：
auto（继承父容器的align-items属性）
实用技巧
- 垂直居中：
css
.container {
display: flex;
align-items: center;
justify-content: center;
}
- 等分空间：
css
.item {
flex: 1;
}
- 固定宽度+自适应：
css
.fixed {
flex: 0 0 200px; /* 固定200px */
}
.auto {
flex: 1; /* 占据剩余空间 */
}
- 响应式导航：
css
nav {
display: flex;
flex-wrap: wrap;
}
nav a {
flex: 1 1 200px; /* 最小200px，自动换行 */
}
Flex 布局是现代 Web 开发中最常用的布局方式之一，熟练掌握它可以大大提高布局效率。
