CSS Flexbox 是一个流行的前端布局技术，用于创建响应式和动态布局。在 Flexbox 中，有两个主要的概念：Flexbox 容器和 Flex 子项。理解它们的属性和如何使用它们是非常重要的。下面我们详细介绍一下。
什么是 Flexbox 容器？
Flexbox 容器是一个包含 Flex 子项的 HTML 容器。为了将一个元素变成 Flexbox 容器，我们需要将其 display 属性设置为 flex 或 inline-flex。这将把这个元素和它的子项放入一个 Flexbox 布局中。
下面是一个简单的 HTML 示例代码：
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
要将 container 元素变成 Flexbox 容器，我们需要将其样式设置为：
---------- - -------- ----- -- ------ -- -
现在，我们已经成功将该容器变成了一个 Flexbox 容器。
Flexbox 容器属性
Flexbox 容器有一些属性可以用来控制子项的排列和布局。
1. flex-direction
该属性用于定义 Flexbox 容器中的主轴方向。默认情况下，主轴方向是水平的（从左到右）。但我们可以通过设置 flex-direction 属性来改变它的方向。
---------- - --------------- -------------------------------------- -
row：主轴方向是水平方向（默认）。row-reverse：主轴方向是水平方向，但从右到左排列。column：主轴方向是竖直方向。column-reverse：主轴方向是竖直方向，但从下到上排列。
2. justify-content
该属性用来定义 Flexbox 容器中沿着主轴如何对齐子项。可以使用以下的值：
---------- - ---------------- ------------------------------------------------------ -
flex-start：子项向主轴起点对齐。flex-end：子项向主轴终点对齐。center：子项居中对齐。space-between：平均地分配子项，并将第一个子项放在主轴起点，最后一个子项放在终点。space-around：平均地分配子项，并将它们在主轴上均匀地分布，使它们之间的间距相等。
3. align-items
该属性定义了 Flexbox 容器中沿着交叉轴如何对齐子项。可以使用以下的值：
---------- - ------------ -------------------------------------------- -
stretch：子项将被拉伸以适应 Flexbox 容器的高度。flex-start：子项向交叉轴起点对齐。flex-end：子项向交叉轴终点对齐。center：子项在交叉轴上居中对齐。baseline：子项基于它们的基线对齐。
4. align-content
该属性用于在 Flexbox 容器中定义多行子项在交叉轴上如何分布。只有在子项有多行时才会生效。可以使用以下的值：
---------- - -------------- -------------------------------------------------------------- -
stretch：子项将被拉伸以适应 Flexbox 容器的高度。flex-start：子项向交叉轴起点对齐。flex-end：子项向交叉轴终点对齐。center：子项在交叉轴上居中对齐。space-between：子项在交叉轴上均匀分布，并在每行之间留下一定数量的间隔。space-around：子项在交叉轴上均匀分布，并在每行之间留下一定数量的间隔，同时在 Flexbox 容器的两端留下同样的间隔。
什么是 Flexbox 子项？
Flexbox 的子项是 Flexbox 容器中的任何 HTML 对象或元素。每个子项都将占用 Flexbox 容器中的特定空间，并遵循容器的规则和属性。
下面是一些示例代码，其中 item 是 Flexbox 容器的子项：
---- ------------------ ---- ----------------- ------- ---- ----------------- ------- ---- ----------------- ------- ------
Flexbox 子项属性
Flexbox 子项有许多属性，可以用来定义其大小、位置、顺序等等。下面是一些常见的 Flexbox 子项属性：
1. order
该属性定义子项的顺序。默认情况下，它们的顺序是它们在 HTML 中出现的顺序。通过将 order 属性设置为一个整数，我们可以改变它们的顺序。
----- - ------ ---------- -
2. flex-grow
该属性定义子项如何放缩以适应 Flexbox 容器。默认情况下，所有的子项都具有相同的大小。通过设置 flex-grow 属性为一个非零值，我们可以让一个子项变得更大，以填充容器中的剩余空间。
----- - ---------- --------- -
<number> 可以是任何非负整数。
3. flex-shrink
该属性定义了子项的收缩能力，以适应较小的容器。如果容器比所有的子项加起来的宽度还要窄，该属性将决定哪些子项将缩小。默认情况下，该属性值为 1，这意味着所有子项都可以缩小。
----- - ------------ --------- -
<number> 可以是任何非负整数。
4. flex-basis
该属性定义了子项在不进行放缩时的大小。可以将它看作是子项的理想大小。默认情况下，所有的子项都具有相同的大小。
----- - ----------- -------- - ----- -
<length> 可以是任何有效的 CSS 长度。
5. flex
flex 是一个缩写属性，它相当于 flex-grow、flex-shrink、和 flex-basis 三个属性的组合。使用 flex 属性可以方便地同时设置这三个属性。
----- - ----- ----------- ------------- ------------- -
6. align-self
该属性定义了单个子项在交叉轴上的对齐方式。与 align-items 不同，该属性只影响单个子项，而非所有子项。
----- - ----------- ------------------------------------------------- -
auto：子项继承其父容器的align-items值。flex-start：子项向交叉轴起点对齐。flex-end：子项向交叉轴终点对齐。center：子项在交叉轴上居中对齐。baseline：子项基于它们的基线对齐。stretch：子项将被拉伸以适应 Flexbox 容器的高度。
结论
通过了解 Flexbox 容器和 Flex 子项的属性，我们可以更好地设计和控制复杂的布局。当然还有许多其他的属性和技巧，在实践中逐渐掌握。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67135446ad1e889fe20c1fc2