CSS Flexbox 布局是现代 Web 开发中最流行的一种布局方式，它可以轻松实现各种复杂的布局效果。不过，要想真正掌握 Flexbox 布局，还需要掌握一些技巧。本文将介绍一些常用的技巧，帮助你更加得心应手地使用 Flexbox 布局。
1. 使用 flex 属性控制元素的伸缩性
Flexbox 布局的核心是 flex 属性，它可以控制元素的伸缩性。flex 属性有三个值：flex-grow、flex-shrink 和 flex-basis。其中，flex-grow 控制元素在剩余空间中的伸展比例，flex-shrink 控制元素在空间不足时的收缩比例，flex-basis 则指定元素的基准大小。
下面的例子中，我们使用 flex 属性实现了一个简单的 Flexbox 布局：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
.container { display: flex; justify-content: space-between; } .box { flex: 1 0 30%; }
在上面的代码中，我们使用了 flex 属性将 .box 元素设置为可伸缩的。flex: 1 0 30% 表示元素可以在剩余空间中按比例伸展，但不允许收缩，基准大小为 30%。
2. 使用 justify-content 和 align-items 控制元素的对齐方式
除了 flex 属性，Flexbox 布局还有两个常用的属性：justify-content 和 align-items。它们可以控制元素在主轴和交叉轴上的对齐方式。
justify-content 属性用于控制元素在主轴上的对齐方式，它有以下几个值：
flex-start：左对齐flex-end：右对齐center：居中对齐space-between：两端对齐，元素之间间隔相等space-around：每个元素两侧的间隔相等
align-items 属性用于控制元素在交叉轴上的对齐方式，它有以下几个值：
flex-start：顶部对齐flex-end：底部对齐center：居中对齐baseline：基线对齐stretch：拉伸对齐
下面的例子中，我们使用 justify-content 和 align-items 属性实现了一个居中对齐的 Flexbox 布局：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- ------- ------------ ------- - ---- - ------ ------ ------- ------ ----------------- ---- -展开代码
在上面的代码中，我们使用了 justify-content 和 align-items 属性将 .container 容器中的 .box 元素居中对齐。
3. 使用 flex-wrap 属性控制元素的换行
默认情况下，Flexbox 布局中的元素会在同一行上排列。如果希望元素可以换行，可以使用 flex-wrap 属性。
flex-wrap 属性有三个值：
nowrap：不换行wrap：换行，第一行在上方wrap-reverse：换行，第一行在下方
下面的例子中，我们使用 flex-wrap 属性实现了一个在窄屏幕上换行的 Flexbox 布局：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ---- - ----- - - ---- ------- ------ ----------------- ---- ------- ----- -展开代码
在上面的代码中，我们使用了 flex-wrap 属性将 .container 容器中的 .box 元素设置为换行，并使用了 flex 属性将元素设置为可伸缩的。这样，在窄屏幕上，.box 元素就会自动换行。
4. 使用 order 属性控制元素的排列顺序
Flexbox 布局中的元素默认按照 HTML 中的顺序排列。如果希望改变元素的排列顺序，可以使用 order 属性。
order 属性可以接受一个整数值，表示元素的排列顺序。默认值为 0。
下面的例子中，我们使用 order 属性调整了 Flexbox 布局中的元素排列顺序：
<div class="container"> <div class="box" style="order: 3;">1</div> <div class="box" style="order: 1;">2</div> <div class="box" style="order: 2;">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- - ---- - ------ ------ ------- ------ ----------------- ---- ------- ----- -展开代码
在上面的代码中，我们使用了 order 属性将第一个元素的排列顺序设置为 3，第二个元素的排列顺序设置为 1，第三个元素的排列顺序设置为 2。这样，它们就会按照我们设置的顺序排列。
5. 使用 flex-direction 属性控制主轴方向
Flexbox 布局中的主轴默认是水平方向。如果希望主轴方向是垂直方向，可以使用 flex-direction 属性。
flex-direction 属性有四个值：
row：水平方向row-reverse：水平方向，从右到左column：垂直方向column-reverse：垂直方向，从下到上
下面的例子中，我们使用 flex-direction 属性将 Flexbox 布局的主轴方向设置为垂直方向：
<div class="container"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> </div>
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ------- - ---- - ------ ------ ------- ------ ----------------- ---- ------- ----- -展开代码
在上面的代码中，我们使用了 flex-direction 属性将 .container 容器中的 .box 元素的主轴方向设置为垂直方向。
结语
以上就是常用的几个 Flexbox 布局技巧。掌握这些技巧，可以让你更加得心应手地使用 Flexbox 布局，轻松实现各种复杂的布局效果。如果你想深入学习 Flexbox 布局，可以参考 MDN 的文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cabcd4e46428fe9e337cf6
