Flex弹性盒：指的是规则可变的父盒，此时对诸多子盒的布局，变成为父盒制定排序规则。
（一）Flex 布局核心概念与机制
Flexbox 是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来布局、对齐和分配容器内项目的空间。
1、其核心概念包括：
（1） 容器与项目：采用 Flex 布局的元素称为 Flex 容器，其内部的子元素称为 Flex 项目。
（2）主轴与交叉轴：Flex 容器有两根轴，主轴由flex-direction定义，交叉轴垂直于主轴。
（3）对齐方式：justify-content 控制主轴对齐，align-items 和 align-content 控制交叉轴对齐。
（4）空间分配：通过 flex-basis、flex-grow 和 flex-shrink 控制项目在主轴上的初始大小、放大和缩小比例。
2、核心两大角色
Flex弹性盒：指的是规则可变的父盒，此时对诸多子盒的布局，变成为父盒制定排序规则。
（1）父容器（flex 容器）
给盒子加 display（flex）: 它就变成弹性盒子父级。
***一个父盒，被他包含的子盒必须遵从的排列规则如下：
1. 块元素，从上到下
2. 行内元素，从左到右
（2）子元素（flex 项目）
容器里面所有直接子标签，自动变成弹性项。
3、方式
通过 display:flex 将此元素强制转换为 Flex 容器
（二）Flex 容器默认规则（不写属性时的默认值）
1. flex-direction: row
→ 主轴方向：水平从左到右
→ 项目会水平排列成一排
2. flex-wrap: nowrap
→ 不换行（默认）
→ 项目会被压缩以适应容器宽度（除非设置 flex-shrink: 0）
→ 如果想换行，需要设置: flex-wrap: wrap;
3. justify-content: flex-start
→ 主轴对齐方式：项目靠主轴起点（左）对齐
→ 其他值: flex-end(右) | center(居中) | space-between | space-around
4. align-items: stretch
→ 交叉轴对齐方式：项目会拉伸填满整个交叉轴方向
→ 前提：项目没有设置 height（或者 height 为 auto）
→ 其他值: flex-start | flex-end | center | baseline
5. align-content: normal (在单行时无效)
→ 多行项目在交叉轴方向的对齐方式
** 项目（item）的默认规则
6. flex-grow: 0
→ 默认不自动放大（当容器有剩余空间时）
→ 如果想自动放大: flex-grow: 1;
7. flex-shrink: 1
→ 默认会自动收缩（当项目总宽度超过容器时）
→ 注意：只有 width/flex-basis 参与收缩，margin/padding/border 不会收缩！
→ 如果不想收缩: flex-shrink: 0;
8. flex-basis: auto
→ 项目的基础尺寸，默认取 width 值
→ 也可以设置为具体像素: flex-basis: 100px;
（三）Flex布局示例1 - 基本容器（按照默认规则排列）
接下来给大家讲解一下Flex布局的基本容器
步骤一：依旧是先建立外层盒子 .container 弹性容器
.container { display: flex; }步骤二：最关键一行普通 div 是上下堆叠，加display: flex后，内部子盒子自动横着排成一行。
（下面是可自行配置的灵活规则
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start; ）
border: 2px solid #aaa; /* 给容器画边框，方便看出范围 */ width: 600px; /* 容器宽度600像素 */ height: 300px; /* 容器高度300像素 */ padding: 10px; /* 内部留白10px */步骤三：写一个内部小盒子 .item 弹性项目
.item { background-color: #4CAF50; /* 绿色背景 */ border: 3px solid red; /* 红色边框 */ width: 80px; /* 每个小盒子默认宽80px */ height: 40px; /* 每个小盒子高40px */ color: white; /* 白色文字 */ text-align: center; /* 文字水平居中 */ }步骤四：body 里的结构
一个大容器包裹一堆小盒子
大容器开了 flex，所有小盒子横向排列
<body> <h3>Flex容器示例（项目按照容器默认规则排列）</h3> <div class="container"> <!-- 块元素：从上到下文档流排列 --> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目1</div> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> <div class="item">项目1</div> </div> </body>结果如下图所示：
（￣︶￣）↗相当于一个大房间里面有很多个小房间，这样理解可能就清晰一点啦。
（四）Flex布局示例2 - justify-content（主轴对齐方式）
justify-content 属性详解
作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布
前提：只有在主轴方向有剩余空间时才会生效
可选值：
1. flex-start → 项目靠主轴起点（左边）对齐（默认值）
[盒子1][盒子2][盒子3] [大盒子右边]2. flex-end → 项目靠主轴终点（右边）对齐
[大盒子左边] [盒子1][盒子2][盒子3]3. center → 项目在主轴方向居中对齐
[盒子1][盒子2][盒子3]4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等
[盒子1] [盒子2] [盒子3]5. space-between → 项目之间间距相等，但首尾项目紧贴容器边缘
[盒子1] [盒子2] [盒子3]6. space-around → 项目两侧的外边距相等（项目之间间距是边缘间距的2倍）
[盒子1] [盒子2] [盒子3]一句话速记：
justify-content= 控制一行盒子 左右怎么摆、空隙怎么分
靠左：flex-start
靠右：flex-end
居中：center
空隙完全相等：space-evenly
两边贴死中间等分：space-between
每个盒子左右相等：space-around
接下来给大家演示一下吧
步骤一：依旧是先建立外层盒子 .container 弹性容器 = 大盒子
.container { display: flex; /* 关键：让里面的小盒子横着排 */ border:2px solid red; /* 红色边框，让你看见范围 */ height:100px; }步骤二：建立小盒子 = 项目
设立项目样式 ：简单设置项目的尺寸和外观
.item { width:80px; height:40px; background:绿色; }就是 3 个绿色小方块。
步骤三：body内容:控制主轴对齐方式。 justify-content属性的六种取值，控制项目在主轴上的对齐方式和间距分布。
<body> <h1>justify-content（控制主轴对齐方式）</h1> <h3>justify-content: flex-start 项目在容器中，以主轴起点对齐（默认值）</h3> <div class="container" style="justify-content: flex-start;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: flex-end 项目在容器中，以主轴终点对齐</h3> <div class="container" style="justify-content: flex-end;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: center 项目在容器中，以主轴居中对齐</h3> <div class="container" style="justify-content: center;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: space-evenly 项目在容器中均匀分布</h3> <div class="container" style="justify-content: space-evenly;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: space-between 项目在容器中均匀分布，但首尾项目紧贴容器边缘</h3> <div class="container" style="justify-content: space-between;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> <h3>justify-content: space-around 项目在容器中均匀分布，但每个项目两侧外边距相等</h3> <div class="container" style="justify-content: space-around;"> <div class="item">项目1</div> <div class="item">项目2</div> <div class="item">项目3</div> </div> --> </body>效果如下图所示：
可以理解为一个大房间里面小房间的布局。
（五）Flex布局示例3- 项目的大小和缩放控制（主轴对齐方式）
讲的是 Flex 里最实用、最常用的 3 个属性：
flex-basis→ 小盒子本来应该多大（基础尺寸）
flex-grow→ 有空地方时，小盒子要不要变大、变大多少
flex-shrink→ 地方不够时，小盒子要不要变小、变小多少
步骤一：大盒子（容器）用来装小盒子
.flex-container { display: flex; /* 让小盒子横着排 */ height: 80px; /* 大盒子高度 */ border: 10px solid #333; /* 黑色粗边框，让你看见范围 */ }步骤二：小盒子（项目）
.item { height: 100%; color: white; }步骤三：body部分（三个实验）
实验 1：flex-basis→小盒子的基础大小
flex-basis：定义项目在主轴方向上的初始大小
- 相当于给项目设置了一个"理想尺寸"
- 优先级高于 width（如果同时设置的话）
- 默认值：auto（会使用项目的 width 值）
本实验：两个项目分别设置为 100px 和 200px
- 容器宽度：500px
- 项目总宽度：100 + 200 = 300px < 500px
- 没有剩余空间，也没有超出，所以保持原大小
思考：小盒子本来应该多大？
flex-basis: 100px;实验 2：flex-grow→有空地就变大
flex-grow（放大比例）：定义项目在有剩余空间时的放大比例
- 默认值：0（不放大）
- 只有当容器有剩余空间时才会生效
- 剩余空间按各项目 flex-grow 值的比例分配
本实验：
- 容器宽度：500px
- 项目初始宽度：100 + 100 = 200px
- 剩余空间：500 - 200 = 300px
- flex-grow 比例：1 : 2（项目1得1份，项目2得2份）
- 总份数：1 + 2 = 3份
- 每份大小：300 ÷ 3 = 100px
计算结果：
- 项目1实际宽度：100 + (1 × 100) = 200px
- 项目2实际宽度：100 + (2 × 100) = 300px
- 验证：200 + 300 = 500px（正好填满容器）
思考：大盒子里有空地方，小盒子要不要抢空间变大？
flex-grow: 1; flex-grow: 2;0= 不抢（默认）
1= 抢 1 份
2= 抢 2 份
打个比方就是：flex-grow就是分剩下的空地。
实验 3：flex-shrink→地方不够就缩小
flex-shrink（缩小比例）：定义项目在空间不足时的缩小比例
- 默认值：1（会自动缩小）
- 设置为 0 表示禁止缩小
- 空间不足时，按各项目 flex-shrink 值的比例分配压缩量
- 注意：margin、padding、border 不参与压缩！
本实验：
- 容器宽度：300px
- 项目初始宽度：200 + 200 = 400px
- 超出空间：400 - 300 = 100px
- flex-shrink 比例：1 : 3（项目1得1份，项目2得3份）
- 总份数：1 + 3 = 4份
- 每份压缩量：100 ÷ 4 = 25px
计算结果：
- 项目1实际宽度：200 - (1 × 25) = 175px
- 项目2实际宽度：200 - (3 × 25) = 125px
- 验证：175 + 125 = 300px（正好等于容器宽度）
-->
思考：大盒子太小了，小盒子要不要挤一挤变小？
flex-shrink: 1; flex-shrink: 3;0= 绝不缩小
1= 缩 1 份
3= 缩 3 份
*****三个属性的默认值和记忆技巧
Flex 三大属性对照表
| 属性 | 默认值 | 作用 | 记忆技巧 |
|---|---|---|---|
| flex-basis | auto | 初始尺寸（理想大小） | basis = 基础 |
| flex-grow | 0 | 有剩余空间时放大 | grow = 生长→变大 |
| flex-shrink | 1 | 空间不足时收缩变小 | shrink = 收缩→变小 |
flex 简写规则
flex: 1=flex: 1 1 0%
flex: auto=flex: 1 1 auto
flex: 0 0 100px= 固定尺寸，不放大不缩小
总代码如下图所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flex布局示例5 - 项目的大小和缩放控制</title> <style> .flex-container { display: flex; height: 80px; border: 10px solid #333; margin: 20px 0; } */ .item { height: 100%; color: white; text-align: center; } </style> </head> <body> --> <p>【实验1】 flex-basis 初始大小（100px 和 200px，无放大缩小）</p > <div class="flex-container" style="width: 500px;"> <div class="item" style="flex-basis: 100px; background: #f44336;">100px</div> <div class="item" style="flex-basis: 200px; background: #4caf50;">200px</div> </div> --> <p>【实验2】flex-grow 放大（初始各100px，总剩余300px，按1:2分配）</p > <div class="flex-container" style="width: 500px;"> <div class="item" style="flex-basis: 100px; flex-grow: 1; background: #2196f3;">grow:1</div> <div class="item" style="flex-basis: 100px; flex-grow: 2; background: #ff9800;">grow:2</div> </div> --> <p>【实验3】 flex-shrink 缩小（初始各200px，总超出100px，按1:3承担）</p > <div class="flex-container" style="width: 300px;"> <div class="item" style="flex-basis: 200px; flex-shrink: 1; background: #9c27b0;">shrink:1</div> <div class="item" style="flex-basis: 200px; flex-shrink: 3; background: #e91e63;">shrink:3</div> </div> </body> </html>结果如下图所示：
（￣︶￣）↗相当于大房间中如何规划小房间的大小占比。
（六）布局示例4 - 多行项目在容器交叉轴方向的对齐方式（含换行控制）
1、 align-content 属性详解
作用：控制多行项目在交叉轴（垂直方向）上的对齐方式
重要前提：
1. 必须先使用 flex-wrap: wrap 换行（产生多行）
2. 只有一行时，align-content 无效
3. 只有在交叉轴方向有剩余空间时才会生效
可选值：
1. flex-start → 所有行靠交叉轴起点（顶部）对齐
2. flex-end → 所有行靠交叉轴终点（底部）对齐
3. center → 所有行在交叉轴方向居中对齐
4. space-between → 行之间间距相等，首行靠顶，末行靠底
5. space-around → 行上下间距相等，整体与容器边缘也有间距
6. stretch → 默认值，行拉伸填满剩余空间（行内项目也会被拉伸）
2、flex-wrap 属性说明
可选值：
1. nowrap (默认) → 不换行，项目会被压缩以适应容器
2. wrap → 换行，项目超出容器时自动换到下一行
3. wrap-reverse → 换行，但反向显示（第一行在底部）
演示一下吧
步骤一：依旧是先建立外层盒子 .container 弹性容器定义flex容器的基础样式
.container { /* 将容器设置为flex布局 */ display: flex; /* 容器宽度固定，控制换行效果 */ width: 500px; /* 容器高度固定，为交叉轴留出空间 */ height: 250px; /* 容器边框，方便观察整体范围 */ border: 2px solid #333; /* 容器之间的外边距，避免拥挤 */ margin: 10px; /* 强制换行：当项目总宽度超过容器时自动换行，产生多行 */ flex-wrap: wrap;****项目样式
注意：本示例中项目没有 margin，所以 flex-shrink 可以正常压缩
如果项目有 margin，margin 不会参与压缩，可能导致溢出
步骤二：建立小盒子 = 项目
.item { /* 项目宽度 */ width: 160px; /* 项目高度 */ height: 40px; /* 项目边框 */ border: green solid 1px; /* 文字颜色 */ color: red; /* 文字水平居中 */ text-align: center; /* 项目外边距（注释掉，为了让 flex-shrink 正常压缩）*/ /* margin: 5px; */ }步骤三：标题样式
p { margin: 20px 0 5px 10px; }步骤四：body部分：五个容器（多行项目在容器交叉轴方向上的对齐方式）
本页面展示了 align-content 的效果：
(注意：由于 flex-wrap 被注释掉，项目没有真正换行！
所以本示例中 align-content 实际上不生效（只有一行）。
如果想看真正的多行对齐效果，需要取消注释 flex-wrap: wrap;)
重要区别：
- align-items: 作用于"单行"内的所有项目（垂直方向的对齐）
- align-content: 作用于"多行"整体（多行作为一个整体在容器中的对齐）
换行相关属性：
- flex-wrap: nowrap (默认) → 不换行
- flex-wrap: wrap → 换行
开始演示!
第一个容器：flex-start 顶部对齐
注意： 第一个容器没有设置 align-content，所以使用默认值 stretch
由于没有换行（flex-wrap 被注释），所以 align-content 实际不生效
<p>align-content: flex-start（所有行整体靠交叉轴起点/顶部）</p > <div class="container" style="align-content: flex-start;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>结果：
第二个容器：center 垂直居中
效果：所有行作为一个整体，在容器垂直方向居中
<p>align-content: center（所有行整体在交叉轴中间/垂直居中）</p > <div class="container" style="align-content: center;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>结果
容器设置居中对齐，多行整体悬浮在容器垂直中间位置
第三个容器：flex-end 底部对齐
效果：所有行靠容器底部对齐
<p>align-content: flex-end（所有行整体靠交叉轴终点/底部）</p > <div class="container" style="align-content: flex-end;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>多行整体紧贴容器底部摆放
结果
第四个容器：space-between 两端贴边均分间距
效果：第一行靠顶，最后一行靠底，行之间间距相等
<p>align-content: space-between（行与行之间间距相等，第一行靠顶，最后一行靠底）</p > <div class="container" style="align-content: space-between;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>首行顶格、末行底格，行与行之间空隙均匀相等
结果
第五个容器：space-around 四周均分间距
效果：每行上下间距相等，整体与容器边缘也有间距
<p>align-content: space-around（行上下都有相等间距，整体与容器边缘也有间距）</p > <div class="container" style="align-content: space-around;"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> </div>每一行上下都预留相同空隙，整体和容器上下边缘也存在间距
结果：
（七）flex-basis、flex-grow、flex-shrink的典型应用
1、响应式导航栏 - 典型应用场景
flex-basis、flex-grow、flex-shrink 是实现灵活布局的核心工具， 尤其适合需要「自适应容器空间」的场景。
【典型场景】：响应式导航栏
导航栏通常包含「Logo、菜单选项、操作按钮」，需要在不同屏幕尺寸下自动调整布局：
- 大屏幕时：元素均匀分布，充分利用空间
- 中等屏幕时：菜单选项自动收缩，避免换行
- 小屏幕时：优先保证关键元素（如 Logo 和按钮）显示，次要菜单适当压缩
2、导航栏布局设计思路
1. Logo（左侧）
- flex-basis: 120px → 初始宽度120px
- flex-grow: 0 → 不放大（保持固定宽度）
- flex-shrink: 0 → 不缩小（保证Logo始终可见）
2. 菜单（中间）
- flex-basis: 0 → 初始宽度为0（不占用固定宽度）
- flex-grow: 1 → 占据所有剩余空间（自动填充）
- flex-shrink: 1 → 空间不足时允许收缩
3. 按钮（右侧）
- flex-basis: 80px → 初始宽度80px
- flex-grow: 0 → 不放大
- flex-shrink: 0.5 → 允许轻微收缩，但收缩比例较小
3、测试方法：
运行后在浏览器按F12，打开开发者工具， 然后调整浏览器窗口宽度，观察导航栏的变化
接下来写一个完整导航栏代码：
步骤一：
Logo区域
- flex: 0 0 120px 的简写形式
- 固定120px宽度，既不放大也不缩小
- 确保品牌标识始终清晰可见
<div style="display: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white;"> <div style="flex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;">LOGO</div>步骤二：
中间菜单区域
- flex: 1 1 0 的简写形式
- flex-basis: 0 表示初始不占宽度，完全依靠 flex-grow 填充剩余空间
- 当屏幕变小时，这个区域会优先收缩
<div style="flex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px;"> <div style="display: flex; gap: 15px;"> <span>首页</span> <span>产品</span> <span>关于我们</span> <span>联系</span> </div> </div>步骤三：
右侧按钮区域
- flex: 0 0.5 80px 的简写形式
- flex-shrink: 0.5 表示允许收缩，但只承担一半的收缩比例
- 这样在极端情况下，按钮会被压缩但不会完全消失
<div style="flex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;">登录</div>总结：
使用 flex: 0 0 120px 可以一次性设置三个属性
| 元素 | flex-grow | flex-shrink | flex-basis | 效果 |
|---|---|---|---|---|
| Logo | 0 | 0 | 120px | 固定宽度，不变化 |
| 菜单 | 1 | 1 | 0 | 自动填充剩余空间 |
| 按钮 | 0 | 0.5 | 80px | 固定宽度，允许轻微收缩 |
总代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>flex-basis、flex-grow、flex-shrink的典型应用</title> </head> <body> <div style="display: flex; align-items: center; height: 60px; padding: 0 20px; background: #333; color: white;"> <div style="flex-basis: 120px; flex-grow: 0; flex-shrink: 0; font-weight: bold;">LOGO</div> <div style="flex-basis: 0; flex-grow: 1; flex-shrink: 1; margin: 0 20px;"> <div style="display: flex; gap: 15px;"> <span>首页</span> <span>产品</span> <span>关于我们</span> <span>联系</span> </div> </div> <div style="flex-basis: 80px; flex-grow: 0; flex-shrink: 0.5; text-align: center;">登录</div> </div> --> </body> </html>结果：
今天讲解的内容有点多，希望大家能一起攻克哦，期待我们下期再见ヾ(≧▽≦*)o
