CSS3 Flexbox 是一种新型的布局方式，它可以轻松地实现响应式布局，并且弥补了传统布局方式的不足之处。在本篇文章中，我们将深入了解 Flexbox 布局的各种属性和用法，并提供实际示例代码，帮助读者理解。
概述
Flexbox 布局是一个弹性排列模型，它基于一条主轴（main axis）和一条交叉轴（cross axis）。主轴是 Flexbox 元素的主要排列方向，而交叉轴则是垂直于主轴的方向。元素的排列方式可通过调整主轴和交叉轴的属性值来实现。
容器属性
Flexbox 布局的样式是应用在包含 Flexbox 元素的容器上的。以下是常见的容器属性：
display: flex表示将容器转化为 Flexbox 布局。flex-direction表示主轴的方向（默认是水平方向）。flex-wrap表示是否需要换行。justify-content表示主轴上元素的对齐方式。align-items表示交叉轴上元素的对齐方式。align-content表示多行元素在交叉轴上的对齐方式。
display: flex
将一个元素的 display 属性设置为 flex，它的子元素就会遵循 Flexbox 布局规则，成为 Flexbox 元素。在这个容器中，可以使用许多 Flexbox 属性来控制元素的布局和显示方式。
示例代码：
<div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>
.container { display: flex; /* 其他属性 */ } .item { /* 其他属性 */ }
flex-direction
flex-direction 定义了主轴的方向。默认值是 row，表示从左到右排列。这个属性接受四个值：
row：从左到右排列。row-reverse：从右到左排列。column：从上到下排列。column-reverse：从下到上排列。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- --------------- ---- -- ---- -- - ------------------ - -------- ----- --------------- ------------ -- ---- -- - ------------------- - -------- ----- --------------- ------- -- ---- -- - --------------------------- - -------- ----- --------------- --------------- -- ---- -- -展开代码
flex-wrap
当 Flexbox 元素的总宽度或高度超过容器的大小时，可以使用 flex-wrap 控制是否需要换行。可选值有三种：
nowrap：不换行。默认值。wrap：换行，默认将第二行在容器下方开始。wrap-reverse：换行，第二行在容器上方开始。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- -- ---- -- - ------------------ - -------- ----- ---------- ------------- -- ---- -- - ----------------- - -------- ----- ---------- ------- -- ---- -- -展开代码
justify-content
在主轴上对元素进行对齐，有以下五个值：
flex-start：左对齐。默认值。flex-end：右对齐。center：居中对齐。space-between：两端对齐，元素间间隔相等。space-around：每个元素两侧的距离相等（包括第一个和最后一个元素的两侧）。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------------- -------------- -- ---- -- - ----------------- - -------- ----- ---------------- ------- -- ---- -- - -------------- - -------- ----- ---------------- --------- -- ---- -- -展开代码
align-items
在交叉轴上对元素进行对齐。可选值有以下五个：
stretch：默认值，子元素高度一致。flex-start：上对齐。flex-end：下对齐。center：垂直居中。baseline：按照首行基线对齐。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- ------------ ------- -- ---- -- - ---------------- - -------- ----- ------------ ----------- -- ---- -- - -------------- - -------- ----- ------------ --------- -- ---- -- -展开代码
align-content
该属性定义了多行 Flexbox 元素在交叉轴上的对齐方式。该属性只有一个值：
stretch：默认值，元素高度自动拉伸以适应容器高度。flex-start：各行排列在交叉轴的起始位置。flex-end：各行排列在交叉轴的结束位置。center：各行排列在交叉轴的中心位置。space-between：每一行都平分交叉轴上的空间（包括边距），行与行之间没有空隙。space-around：各行都平分相同的交叉轴上的空间，行与行之间的空隙相等。
示例代码：
-- -------------------- ---- ------- ---------- - -------- ----- -------------- ------- -- ---- -- - --------------------- - -------- ----- -------------- ----------- -- ---- -- - ------------------- - -------- ----- -------------- --------- -- ---- -- -展开代码
小结
本文介绍了 Flexbox 布局的各种容器属性，并提供了实际示例代码。使用 Flexbox 布局可以轻松地创建漂亮的响应式页面。在下一篇文章中，我们将深入探讨 Flexbox 元素的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67baab93306f20b3a69a3d2d
