CSS Flexbox 是一种强大的布局方式，它能够便捷、灵活地实现各种常见的页面布局效果。本文将详细介绍 Flexbox 的使用，以及如何利用它实现常见的布局效果，并提供一些解决方案供读者参考。
Flexbox 简介
CSS Flexbox 是一种基于弹性盒子的布局方式。通过使用弹性盒子（flex container）和下面的弹性子元素（flex items）来创建布局。这种方式允许我们轻松地控制排列顺序、对齐、分布和空间分配。
创建一个 Flexbox
创建一个简单的 Flexbox 非常容易，只需为容器设置 display: flex 属性即可。如下所示：
--------------- - -------- ----- -
此时，该容器下的子元素将以弹性布局排列。
Flexbox 属性
flex-direction
flex-direction 属性用于控制 flexbox 的主轴方向。默认情况下，主轴方向为水平方向，即 row。若需要将主轴方向改为垂直方向，可以将 flex-direction 设置为 column。同时，row-reverse 和 column-reverse 分别表示主轴方向为水平方向由右到左、垂直方向由下到上。
--------------- - -------- ----- --------------- ------- -
justify-content
justify-content 属性用于控制 flexbox 在主轴上的对齐方式。其可选值包括：
flex-start：位于主轴起点（默认值）。flex-end：位于主轴末尾。center：位于主轴中间。space-around：均匀分布在主轴上，每个子元素周围具有一致的间距，子元素之间的间距为它们的宽度或高度的一半。space-between：均匀分布在主轴上，子元素之间具有相等的间距，但第一个和最后一个子元素距离容器边缘的间距是子元素间距的一半。
--------------- - -------- ----- ---------------- ------- -
align-items
align-items 属性用于控制 flexbox 在交叉轴上（即默认垂直于主轴方向的轴）的对齐方式。其可选值包括：
stretch：将所有子元素拉起并填充 flexbox。flex-start：位于交叉轴起点。flex-end：位于交叉轴末尾。center：位于交叉轴中间。baseline：与其它元素的第一行文本的基线对齐。
--------------- - -------- ----- ------------ ------- -
align-content
align-content 属性用于控制多行或多列子元素的对齐方式。只有当子元素有多个线时，该属性才生效。一个有趣的用例是 flex-wrap 属性为 wrap 时。
flex-start：交叉轴开始处。flex-end：交叉轴结束处。center：交叉轴中心。space-between：线之间平均分布。space-around：线之间平均分布，两端加上空白。stretch：子元素被拉起以填满父容器。
--------------- - -------- ----- -------------- ------- -
flex-wrap
flex-wrap 属性用于控制 flexbox 的子元素是否将自动换行。其可选值包括：
nowrap：所有子元素在一行内。wrap：子元素不能放在一行上，必须换行。wrap-reverse：子元素不能放在一行上，换行方向与wrap完全相反。
--------------- - -------- ----- ---------- ----- -
flex-grow、flex-shrink 和 flex-basis
这三个属性通常一起使用，以更好地控制子元素在 flexbox 中的布局。
flex-grow表示子元素在自动布局时所占的剩余空间比例，可以理解为占用剩余空间的比例。默认值为 0，表示子元素无法超出其自身设定的宽度或高度。flex-shrink表示子元素在自动布局时缩小的比例，表示空间不足时缩小的比例，默认值为 1。flex-basis表示分配 flexbox 时分配给子元素的空间，默认为auto，基于子元素在无 flex 的情况下的实际宽度或高度。
---------- - ---------- -- ------------ -- ----------- ----- -
常见布局
居中布局
居中布局是常见的 Web 页面布局之一，表示将容器中的所有子元素在垂直和水平方向上都居中显示。
---- ----------------------- ---- ---------------- -------------- ------
--------------- - -------- ----- ---------------- ------- ------------ ------- ------- ------ - ---------- - ------ ------ ------- ----- - ------- - ----------------- ---- -
两列布局
两列布局是比较常见的 Web 页面布局之一，表示将内容分为两列并分别排列。使用 Flexbox 实现这种布局方式非常容易。
---- ----------------------- ---- ---------------- ------------ ---- ---------------- ------------- ------
--------------- - -------- ----- - ---------- - ------ ---- ------- ------ - ----- - ----------------- ------- - ------ - ----------------- ------ ----------- ----------- -
三列布局
三列布局是常见的 Web 页面布局之一，表示将内容分为三列并分别排列。
---- ----------------------- ---- ---------------- ------------ ---- ---------------- -------------- ---- ---------------- ------------- ------
--------------- - -------- ----- ---------------- -------------- - ---------- - ------ ---- ------- ------ - ----- - ----------------- ------- - ------- - ----------------- ----- - ------ - ----------------- ------ -
等高布局
等高布局能够让子元素高度一致。对于网格系统或列布局的情况，这是实现一致样式的重要条件。
---- ----------------------- ---- ------------------------ ---- ------------------------ ---- ------------------------ ------
--------------- - -------- ----- - ---------- - ---------- -- ------- ------ ------- - ----- ----------------- ---- -
解决方案
特定宽度的垂直居中
如果我们希望让一个元素垂直居中，且其高度已知，则可以将该元素放到一个容器中，并将容器设置为 display: flex，再通过 align-items: center 实现垂直居中。
---- --------------- ---- ------------------------ ------
------- - ------- ------ -------- ----- ---------------- ------- ------------ ------- ----------------- ----- - ------ - ------ ------ ------- ----- ----------------- ----- -
特定宽度的水平居中
如果我们希望让一个元素水平居中，且其宽度已知，则可以使用 Flexbox 和 margin: auto 实现。
---- --------------- ---- ---------------------- ------
------- - ------- ------ -------- ----- ---------------- ------- ------------ ------- ----------------- ----- - ------ - ------ ------ ------- ------ ----------------- ----- ------- ----- -
等分布局
如果我们需要将一组子元素等分为容器大小的百分比，则可以使用 flex-basis 实现。
---- --------------- ---- --------------------- ---- --------------------- ---- --------------------- ---- --------------------- ------
------- - -------- ----- ---------------- -------------- ------ ------ ----------------- ----- - ------ - ----------- ---- ------- ----- ----------------- ----- -
总结
CSS Flexbox 能够实现许多 Web 页面常见的布局效果，本文介绍了它的基本使用和常见布局效果，同时提供了数个解决方案供参考。这是 Web 前端开发人员所必须掌握的技术之一，值得深入学习和掌握。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/646c634a968c7c53b0b5eff4