Flexbox 是 CSS3 的新特性之一，它可以很好的解决传统的布局问题。Flexbox 采用弹性盒子的布局方式，能够让布局更加灵活、直观和方便。本文总结 Flexbox 的使用方法，并用实战项目演示如何利用 Flexbox 布局。
一、基本概念
1.1 主轴和交叉轴
Flexbox 布局中有两个重要的概念，分别是主轴和交叉轴。主轴是弹性盒子的方向，交叉轴是与主轴垂直的方向。在 flex-direction 属性中定义主轴的方向，可以是水平方向（row、row-reverse）或垂直方向（column、column-reverse）。
1.2 弹性容器和弹性子元素
要使用 Flexbox 布局，需要将需要布局的元素包裹在一个弹性容器中。弹性容器的属性包括 flex-direction、justify-content、align-items 和 flex-wrap 等。弹性容器中的每一个元素都是弹性子元素，可以使用 order、flex-grow、flex-shrink 和 flex-basis 等属性来控制其排列和尺寸。
二、基本用法
2.1 弹性容器
.container {
display: flex; /* 将容器设为弹性容器 */
flex-direction: row; /* 水平方向排列 */
justify-content: center; /* 沿主轴居中 */
align-items: center; /* 沿交叉轴居中 */
flex-wrap: wrap; /* 换行排列 */
}flex-direction：设置主轴的方向。默认是row，表示水平方向；也可以是column，表示垂直方向；还可以是row-reverse和column-reverse。justify-content：设置主轴上子元素排列方式。默认值是flex-start，表示靠左排列；也可以是center，表示居中排列；还可以是flex-end、space-between、space-around或space-evenly。align-items：设置交叉轴上子元素排列方式。默认值是stretch，表示拉伸排列；也可以是flex-start、center、flex-end或baseline。flex-wrap：设置换行方式。默认值是nowrap，表示不换行；也可以是wrap和wrap-reverse。
2.2 弹性子元素
.item {
order: 1; /* 设置元素排列顺序 */
flex-grow: 1; /* 允许子元素放大 */
flex-shrink: 1; /* 允许子元素缩小 */
flex-basis: 0; /* 初始尺寸为 0，等分剩余空间 */
}order：设置弹性子元素排列顺序，值越小越靠前。flex-grow：设置子元素是否允许放大，值越大，子元素在弹性容器中的占据空间越大。flex-shrink：设置子元素是否允许缩小，值越大，子元素在弹性容器中的占据空间越小。flex-basis：设置子元素初始尺寸，可以是固定值或百分比。默认值是auto，表示元素本来的宽度或高度。
三、实战演练
下面以一个实际项目为例，演示如何使用 Flexbox 布局。
3.1 项目需求
要求实现一个选项卡布局，在页面上有四个选项卡，“选项1”、“选项2”、“选项3”、“选项4” ，点击不同的选项卡，显示不同的内容。
3.2 HTML 结构
<div class="container"> <div class="item">选项1</div> <div class="item">选项2</div> <div class="item">选项3</div> <div class="item">选项4</div> </div>
3.3 CSS 样式
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ----- - ---------- -- ----------- -- ----------- ------- -------- ----- ------- -------- - ------- - ----------------- -------- ------ ----- -
3.4 JavaScript 代码
-- -------------------- ---- -------
----- ----- - -----------------------------------
----- -------- - ------- ------ ------ -------
-------------------- ------ -- -
------------------------------ -- -- -
-------------------- -- -
--------------------------------
---
-----------------------------
----- ------- - -----------------------------------
------------------- - ----------------
---
---在以上代码中，我们使用 querySelectorAll 方法获取 item 元素，然后使用 forEach 方法添加点击事件。在点击事件中，移除所有的 active 类名，将当前点击的元素添加 active 类名，并通过 querySelector 方法获取名为 content 的元素来显示相应的内容。
四、总结
Flexbox 布局是一个很强大的工具，能够大大提升前端开发效率和用户体验。本文介绍了 Flexbox 的基本概念、基本用法和实战演练，相信读者已经掌握了 Flexbox 布局的使用方法。还有更多高级用法需要继续学习和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485757248841e989444829e