弹性盒子（Flex）核心知识点

一、弹性盒子基础概念

1. 组成结构
   给父元素设置 display: flex，父元素称为弹性容器，容器内直接子元素自动变为弹性项目。

2. 作用
   快速实现元素水平/垂直居中、多元素均分、自适应横向排列，替代传统浮动布局，无高度塌陷问题，是网页导航、卡片布局首选方案。

3. 两根主轴

• 主轴：默认水平方向（row），元素沿主轴排列

• 交叉轴：垂直于主轴，默认竖直方向
二、弹性容器属性（写在父盒子）

1. display: flex
   开启弹性布局，子元素自动横向排列。

2. flex-direction 设置主轴方向

• row 默认：水平从左到右

• column：垂直从上到下

• row-reverse：水平反向右→左

• column-reverse：垂直反向下→上

3. justify-content 主轴对齐（水平常用）

• flex-start 默认：左对齐

• center：居中

• flex-end：右对齐

• space-between：两端贴边，中间自动均分空隙

• space-around：每个元素两侧均分空隙

4. align-items 交叉轴单行对齐（垂直居中核心）

• center：垂直居中（高频考点）

• flex-start：顶部对齐

• flex-end：底部对齐

5. flex-wrap 换行

• nowrap 默认：不换行，元素压缩挤在一行

• wrap：空间不足自动换行

6. align-content 多行元素整体垂直对齐
   仅配合 flex-wrap: wrap 生效，可选 center、space-between 等。
   三、弹性项目属性（写在子盒子）

7. flex: 数值 分配剩余空间（均分导航核心）
   例：flex:1 所有子元素平分父盒子剩余宽度，适合等分导航栏。

8. align-self 单独控制单个子元素垂直对齐
   可单独设置 center / flex-end，覆盖父盒子 align-items。

9. order 调整子元素排列顺序
   数值越小越靠前，默认 order:0。