什么是 Flexbox？
Flexbox 是 CSS3 引入的一种新型的布局方式，可以将容器中的子元素按照一定的规则排列成一行或一列。使用 Flexbox 布局可以提高页面布局的灵活性和可读性，从而加速布局效率。
Flexbox 布局的基本概念
Flexbox 布局中有两个非常重要的概念：容器和项目。
容器是指使用 Flexbox 布局的元素，称为 flex container，容器中包含若干个项目，称为 flex item。容器一般作为父元素，而项目则是容器的子元素。
在 Flexbox 布局中，容器具备以下特征：
- display: flex 属性，标识该元素为一个 flex container；
- flex-direction 属性，控制子元素的排列方向；
- flex-wrap 属性，定义子元素是否可以换行；
- justify-content 属性，定义子元素在主轴方向的对齐方式；
- align-items 属性，定义子元素在交叉轴方向的对齐方式。
项目在 Flexbox 布局中具备以下特征：
- order 属性，定义子元素的排列顺序；
- flex-grow 属性，定义子元素的放大比例；
- flex-shrink 属性，定义子元素的缩小比例；
- flex-basis 属性，定义子元素的初始大小；
- flex 属性，同时定义以上三个属性。
下面我们来逐一详细解析 Flexbox 布局的这些特性。
flex-direction：子元素的排列方向
flex-direction 属性定义容器的主轴方向，子元素的排列方向由主轴方向决定，属性可选值为 row、row-reverse、column 和 column-reverse。
如果设置为 row，则子元素按照从左到右的顺序排列，如果设置为 row-reverse，则子元素按照从右到左的顺序排列，如果设置为 column，则子元素按照从上到下的顺序排列，如果设置为 column-reverse，则子元素按照从下到上的顺序排列。
下面是示例代码：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- --------------- ---- -- --------- -- - ----- - ------ ------ ------- ------ ------- ----- ----------------- ---- ------ ------ ---------- ----- -------- ----- ---------------- ------- ------------ ------- -
上面的代码中，我们设置了父元素的 display 为 flex，以使其成为 flex container，同时设置了子元素的宽度、高度和其他一些样式。同时，我们将父元素的 flex-direction 设置为 row，子元素会按照从左到右的顺序排列。
flex-wrap：子元素的换行方式
flex-wrap 属性定义容器的子元素是否允许换行，属性可选值为 nowrap、wrap 和 wrap-reverse。
如果设置为 nowrap，则所有子元素在一行内排列，如果设置为 wrap，则子元素允许换行，如果设置为 wrap-reverse，则子元素从下往上排列。
下面是示例代码：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------- ----- -- --------- -- ------ ------ ----------------- ------ - ----- - ------ ------ ------- ------ ------- ----- ----------------- ---- ------ ------ ---------- ----- -------- ----- ---------------- ------- ------------ ------- -
在上面的代码中，我们设置了父元素的 display 为 flex，并将子元素的宽度和高度都设置为 100px。同时，我们将父元素的 flex-wrap 设置为 wrap，表示子元素可以换行，并设置了父元素的宽度为 400px。
justify-content：主轴方向的对齐方式
justify-content 属性定义了容器子元素在主轴方向上的对齐方式。主轴方向取决于 flex-direction 属性的值，如果 flex-direction 为 row 或 row-reverse，则主轴方向为水平方向，如果 flex-direction 为 column 或 column-reverse，则主轴方向为垂直方向。
justify-content 属性可选值如下：
- flex-start：子元素在主轴方向上靠左对齐；
- flex-end：子元素在主轴方向上靠右对齐；
- center：子元素在主轴方向上居中对齐；
- space-between：子元素在主轴方向上平均分布，并紧贴容器两端；
- space-around：子元素在主轴方向上平均分布，各子元素周围留有空白间隔。
下面是示例代码：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ---------------- -------------- -- ------------- -- ------ ------ ------- ------ - ----- - ------ ------ ------- ------ ----------------- ---- ------ ------ ---------- ----- -------- ----- ---------------- ------- ------------ ------- -
在上面的代码中，我们设置了父元素的 display 为 flex，并将父元素的宽度设置为 600px，高度设置为 150px。同时，我们设置了子元素的宽度和高度，将父元素的 justify-content 设置为 space-between，表示子元素在水平方向上平均分布并紧贴容器两端。
align-items：交叉轴方向的对齐方式
align-items 属性定义了容器子元素在交叉轴方向上的对齐方式。交叉轴方向与主轴方向垂直，在 flex-direction 为 row 或 row-reverse 时是垂直方向，在 flex-direction 为 column 或 column-reverse 时是水平方向。
align-items 属性可选值如下：
- normal：子元素在交叉轴方向上默认为 flex-start；
- stretch：子元素在交叉轴方向上延展至容器大小；
- flex-start：子元素在交叉轴方向上靠上对齐；
- flex-end：子元素在交叉轴方向上靠下对齐；
- center：子元素在交叉轴方向上居中对齐；
- baseline：子元素在交叉轴方向上按照第一行文字基线对齐。
下面是示例代码：
---- ------------------ ---- -------------------- ---- -------------------- ---- -------------------- ------
---------- - -------- ----- ------------ ------- -- ------------- -- ------ ------ ------- ------ ----------------- ------ - ----- - ------ ------ ------- ------ ------- ----- ----------------- ---- ------ ------ ---------- ----- -------- ----- ---------------- ------- ------------ ------- -
在上面的代码中，我们设置了父元素的 display 为 flex，并将父元素的宽度和高度都设置为 300px。同时，我们将父元素的 align-items 设置为 center，表示子元素在垂直方向上居中对齐。
总结
通过上面的介绍，我们可以看出 Flexbox 布局是一种非常有用的布局方式，具有很高的灵活性和可读性。掌握好 flex-direction、flex-wrap、justify-content 和 align-items 这几个属性，就可以轻松实现各种复杂的页面布局了。
好了，以上就是 Flexbox 的详解，希望对大家有所帮助。如果您还有其他的疑问或建议，欢迎在下面评论区留言！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64f81d6df6b2d6eab304047c