目录
一、Flex布局基础概念1. 弹性容器（Flex container）与弹性项目（Flex item）2. 主轴（Main Axis）与交叉轴（Cross Axis）
二、容器属性详解1. `flex-direction`：决定主轴方向2. `justify-content`：主轴对齐方式3. `align-items`：交叉轴对齐方式4. `flex-wrap`：是否换行5. `align-content`：多行项目的交叉轴对齐，如果只有一行则不生效6. `gap`：项目间距
三、项目属性详解1. `order`：项目排列顺序2. `flex-grow`：放大比例3. `flex-shrink`：缩小比例4. `flex-basis`：初始尺寸5. `flex`：`flex-grow`, `flex-shrink` 和 `flex-basis`的简写6. `align-self`：单个项目交叉轴对齐
四、实战代码示例示例1：经典导航栏示例2：等高卡片布局示例3：垂直居中（经典问题）
更多优质内容请关注微信公众号 @web前端工程狮 每篇文章都会带示意图、详解、代码，关注我和我一起学前端~
整理一下日常开发里常用的 弹性盒子（Flex Box） 布局。很难想象我曾经一度执着于用float、text-align、vertical-align等属性来解决元素居中对齐的问题，显然，很多场景是无法满足的。
一、Flex布局基础概念
Flex布局是CSS3的新特性，是日常开发最常用的一种布局方式，避免了 float 导致的布局塌陷、position: absolute 脱离文档流的问题。 当页面需要适应不同屏幕大小以及设备类型时，Flex布局可以确保元素随之灵活变化。
1. 弹性容器（Flex container）与弹性项目（Flex item）
弹性容器：通过 display: flex 或 display: inline-flex 定义弹性项目（弹性子元素）：容器的直接子元素自动成为弹性项目，弹性容器包含一个或多个弹性项目
不使用 display: flex 的效果： 使用 display: flex 的效果：
2. 主轴（Main Axis）与交叉轴（Cross Axis）
主轴：项目排列的主要方向（默认水平从左到右）交叉轴：与主轴垂直的方向（默认垂直从上到下）通过 flex-direction 修改主轴方向
二、容器属性详解
以下6个属性设置在容器上：
1. flex-direction：决定主轴方向
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row：默认值，水平排列，从左到右row-reverse：水平排列，从右到左column：垂直排列，从上到下column-reverse：垂直排列，从下到上
2. justify-content：主轴对齐方式
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
flex-start：默认值，左对齐flex-end：右对齐center：居中space-between：两端对齐，项目之间间隔相等space-around：项目两侧的间隔相等，首尾项目与容器边缘的间距是项目之间间距的一半space-evenly：项目之间间隔相等，首尾项目与容器边缘的间距也等于项目之间间距
3. align-items：交叉轴对齐方式
.container {
align-items: stretch | flex-start | flex-end | center | baseline;
}
stretch：默认值，如果项目未设置高度或设为auto，则拉伸至容器高度flex-start：交叉轴起点对齐flex-end：交叉轴终点对齐center：居中baseline：项目的第一行文字的基线对齐
4. flex-wrap：是否换行
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap：默认值，不换行，可能导致溢出wrap：项目总宽度超过容器时换行显示wrap-reverse：往上换行
5. align-content：多行项目的交叉轴对齐，如果只有一行则不生效
.container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
生效条件：容器有多行项目（需设置 flex-wrap: wrap）stretch：默认值，轴线撑满交叉轴
6. gap：项目间距
.container {
gap: 10px; /* 同时设置行与列间距 */
row-gap: 10px;
column-gap: 20px;
}
三、项目属性详解
以下6个属性设置在项目上：
1. order：项目排列顺序
.item {
order: 5; /* 默认0，数值越小越靠前 */
}
应用场景：调整项目显示顺序（不修改HTML结构）
2. flex-grow：放大比例
.item {
flex-grow: 1; /* 默认0（就算有剩余空间也不放大） */
}
分配规则：根据比例分配剩余空间示例：如果三个项目同时设置 flex-grow: 1 则等分剩余空间
3. flex-shrink：缩小比例
.item {
flex-shrink: 1; /* 默认1（如果空间不足则缩小） */
}
生效条件：项目总宽度超过容器时按比例缩小flex-shrink：0的不缩小
4. flex-basis：初始尺寸
.item {
flex-basis: 200px | auto; /* 默认auto，项目本来的大小 */
}
优先级：比 width 更高
5. flex：flex-grow, flex-shrink 和 flex-basis的简写
.item {
flex: auto | none | 1 | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]; /* 默认0 1 auto */
}
几个快捷键：
auto：1 1 autonone：0 0 auto1：1 1 0%initial：默认值，0 1 auto 后两个属性可选
6. align-self：单个项目交叉轴对齐
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
auto：默认值允许单个项目有与其他项目的对齐方式不一致，覆盖容器的 align-items 设置
四、实战代码示例
示例1：经典导航栏
示例2：等高卡片布局
多行内容
示例3：垂直居中（经典问题）
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
看到这里就基本掌握了Flex布局。后面会再整理一下关于另一个布局方式Grid的详解以及他们的区别。
更多优质内容请关注微信公众号 @web前端工程狮 每篇文章都会带示意图、详解、代码，关注我和我一起学前端~