每天get一个前端小技巧月入过万不是梦-Flex弹性盒子
Flex 弹性盒子是 CSS 中一种用于布局的模块，官方名称叫Flexible Box Layout。
它的核心思想是：让容器有能力改变内部子元素的宽、高、顺序，从而在不同尺寸的屏幕上都能高效地填充可用空间。
简单理解，就是把一个父容器设为 Flex 模式后，它的直接子元素就会自动拥有“弹性”行为。
一、用大白话带你分析
用大白话来说，Flex 弹性盒子就像一个有强迫症的收纳大师，帮你自动排列盒子里的东西。
你可以这样想象：
1. 它像一个“万能对齐神器”
以前你想让一个东西上下左右居中，得写好几行代码，还不一定管用。用了 Flex，你只需要对父容器说：
“里面的东西，都给我水平居中！”
“再给我垂直居中！”
它就听话照做。所以有个经典笑话：“学会 Flex 后，再也不用为了垂直居中而烧香了。”
2. 它像一个“伸缩自如的弹簧”
你告诉里面的子元素：“你 flex: 1；”
意思就是：“这里剩下的空地方，你全占了吧。”如果有三个兄弟元素，一个
flex: 1，另一个flex: 2，它们就会按 1:2 的比例瓜分父容器的剩余空间。窗口变大，它们跟着变大；窗口变小，它们跟着变小——真的有“弹性”。3. 它帮你解决“换行和顺序”问题
一行放不下了？加个
flex-wrap: wrap，它自动换到下一行，不用你手动算宽度。你想把第三个盒子显示在第一个位置？直接加个
order: -1，它就乖乖跑前面去，HTML 代码顺序完全不用动。
注意，你只要记住三个最常用的口诀：
左右怎么排？→
justify-content（主轴对齐）上下怎么排？→
align-items（交叉轴对齐）谁想占满剩余空间？→
flex: 1（放大的能力）
二、 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;
三、代入一个案例让你搞懂怎么使用
I.默认规则排列案例
1.实例代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Flex布局示例1 - 基本容器（按照默认规则排列）</title> <style> .container { /* 通过 display:flex 将此元素强制转换为 Flex 容器 */ display: flex; /* 下面是可自行配置的灵活规则 */ /* flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; */ border: 2px solid #aaa; width: 600px; height: 300px; padding: 10px; } .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; text-align: center; } </style> </head> <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> </html>2.运行效果
II.主轴和交叉轴
主轴
1.实例代码
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Flex布局示例3 - justify-content（主轴对齐方式）</title> <style> /* ====== justify-content 属性详解 ====== 作用：控制所有项目在主轴（水平方向）上的对齐方式和间距分布 前提：只有在主轴方向有剩余空间时才会生效 可选值： 1. flex-start → 项目靠主轴起点（左边）对齐（默认值） 2. flex-end → 项目靠主轴终点（右边）对齐 3. center → 项目在主轴方向居中对齐 4. space-evenly → 项目之间以及项目与容器边缘的间距完全相等 5. space-between → 项目之间间距相等，但首尾项目紧贴容器边缘 6. space-around → 项目两侧的外边距相等（项目之间间距是边缘间距的2倍） */ .container { display: flex; border: 2px solid #a00; padding: 10px; height: 100px; } /* ====== 项目样式 ====== 简单设置项目的尺寸和外观 */ .item { background-color: #4CAF50; border: 3px solid red; width: 80px; height: 40px; color: white; /* margin: 5px; padding: 20px; */ text-align: center; } </style> </head> <body> <h1>justify-content（控制主轴对齐方式）</h1> <!-- justify-content属性的六种取值，控制项目在主轴上的对齐方式和间距分布。 --> <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> </body> </html>2.运行效果
交叉轴
1.示例代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Flex布局示例6 - 多行项目在容器交叉轴方向的对齐方式（含换行控制）</title> <style> /* ====== 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 → 默认值，行拉伸填满剩余空间（行内项目也会被拉伸） */ /* ====== flex-wrap 属性说明 ====== 可选值： 1. nowrap (默认) → 不换行，项目会被压缩以适应容器 2. wrap → 换行，项目超出容器时自动换到下一行 3. wrap-reverse → 换行，但反向显示（第一行在底部） */ /* 定义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; } </style> </head> <body> <!-- ====== align-content vs align-items 区别 ====== 本页面展示了 align-content 的效果： 注意：由于 flex-wrap 被注释掉，项目没有真正换行！ 所以本示例中 align-content 实际上不生效（只有一行）。 如果想看真正的多行对齐效果，需要取消注释 flex-wrap: wrap; 重要区别： - align-items: 作用于"单行"内的所有项目（垂直方向的对齐） - align-content: 作用于"多行"整体（多行作为一个整体在容器中的对齐） 换行相关属性： - flex-wrap: nowrap (默认) → 不换行 - flex-wrap: wrap → 换行 --> <h1>多行项目在容器交叉轴方向上的对齐方式</h1> <!-- 第一个容器没有设置 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> <!-- 2. align-content: 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> <!-- 3. align-content: 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> <!-- 4. align-content: 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> <!-- 5. align-content: 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> </body> </html>2.运行效果
三、总结
1.Flex弹性盒子是CSS中强大的布局模块，通过设置容器为display:flex，可以轻松控制子元素的排列方式。
2.核心功能包括：1）justify-content控制主轴（水平）对齐；2）align-items控制交叉轴（垂直）对齐；3）flex-grow/flex-shrink实现弹性伸缩。
3.Flex布局解决了传统布局中垂直居中困难、元素换行复杂等问题，支持响应式调整和动态排序，大大简化了网页布局开发。
4.通过设置flex-wrap可实现多行布局，align-content控制多行整体对齐。掌握Flex布局能显著提升前端开发效率。