CSS Flexbox 布局中 Flexbox 容器和 Flex 子项的属性详解

CSS Flexbox 是一个流行的前端布局技术，用于创建响应式和动态布局。在 Flexbox 中，有两个主要的概念：Flexbox 容器和 Flex 子项。理解它们的属性和如何使用它们是非常重要的。下面我们详细介绍一下。

什么是 Flexbox 容器？

Flexbox 容器是一个包含 Flex 子项的 HTML 容器。为了将一个元素变成 Flexbox 容器，我们需要将其 display 属性设置为 flex 或 inline-flex。这将把这个元素和它的子项放入一个 Flexbox 布局中。

下面是一个简单的 HTML 示例代码：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

要将 container 元素变成 Flexbox 容器，我们需要将其样式设置为：

.container {
  display: flex;
  /* 其他样式属性 */
}

现在，我们已经成功将该容器变成了一个 Flexbox 容器。

Flexbox 容器属性

Flexbox 容器有一些属性可以用来控制子项的排列和布局。

1. flex-direction

该属性用于定义 Flexbox 容器中的主轴方向。默认情况下，主轴方向是水平的（从左到右）。但我们可以通过设置 flex-direction 属性来改变它的方向。

.container {
  flex-direction: row|row-reverse|column|column-reverse;
}

• row：主轴方向是水平方向（默认）。
• row-reverse：主轴方向是水平方向，但从右到左排列。
• column：主轴方向是竖直方向。
• column-reverse：主轴方向是竖直方向，但从下到上排列。

2. justify-content

该属性用来定义 Flexbox 容器中沿着主轴如何对齐子项。可以使用以下的值：

.container {
  justify-content: flex-start|flex-end|center|space-between|space-around;
}

• flex-start：子项向主轴起点对齐。
• flex-end：子项向主轴终点对齐。
• center：子项居中对齐。
• space-between：平均地分配子项，并将第一个子项放在主轴起点，最后一个子项放在终点。
• space-around：平均地分配子项，并将它们在主轴上均匀地分布，使它们之间的间距相等。

3. align-items

该属性定义了 Flexbox 容器中沿着交叉轴如何对齐子项。可以使用以下的值：

.container {
  align-items: stretch|flex-start|flex-end|center|baseline;
}

• stretch：子项将被拉伸以适应 Flexbox 容器的高度。
• flex-start：子项向交叉轴起点对齐。
• flex-end：子项向交叉轴终点对齐。
• center：子项在交叉轴上居中对齐。
• baseline：子项基于它们的基线对齐。

4. align-content

该属性用于在 Flexbox 容器中定义多行子项在交叉轴上如何分布。只有在子项有多行时才会生效。可以使用以下的值：

.container {
  align-content: stretch|flex-start|flex-end|center|space-between|space-around;
}

• stretch：子项将被拉伸以适应 Flexbox 容器的高度。
• flex-start：子项向交叉轴起点对齐。
• flex-end：子项向交叉轴终点对齐。
• center：子项在交叉轴上居中对齐。
• space-between：子项在交叉轴上均匀分布，并在每行之间留下一定数量的间隔。
• space-around：子项在交叉轴上均匀分布，并在每行之间留下一定数量的间隔，同时在 Flexbox 容器的两端留下同样的间隔。

什么是 Flexbox 子项？

Flexbox 的子项是 Flexbox 容器中的任何 HTML 对象或元素。每个子项都将占用 Flexbox 容器中的特定空间，并遵循容器的规则和属性。

下面是一些示例代码，其中 item 是 Flexbox 容器的子项：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

Flexbox 子项属性

Flexbox 子项有许多属性，可以用来定义其大小、位置、顺序等等。下面是一些常见的 Flexbox 子项属性：

1. order

该属性定义子项的顺序。默认情况下，它们的顺序是它们在 HTML 中出现的顺序。通过将 order 属性设置为一个整数，我们可以改变它们的顺序。

.item {
  order: <integer>;
}

2. flex-grow

该属性定义子项如何放缩以适应 Flexbox 容器。默认情况下，所有的子项都具有相同的大小。通过设置 flex-grow 属性为一个非零值，我们可以让一个子项变得更大，以填充容器中的剩余空间。

.item {
  flex-grow: <number>;
}

<number> 可以是任何非负整数。

3. flex-shrink

该属性定义了子项的收缩能力，以适应较小的容器。如果容器比所有的子项加起来的宽度还要窄，该属性将决定哪些子项将缩小。默认情况下，该属性值为 1，这意味着所有子项都可以缩小。

.item {
  flex-shrink: <number>;
}

<number> 可以是任何非负整数。

4. flex-basis

该属性定义了子项在不进行放缩时的大小。可以将它看作是子项的理想大小。默认情况下，所有的子项都具有相同的大小。

.item {
  flex-basis: <length> | auto;
}

<length> 可以是任何有效的 CSS 长度。

5. flex

flex 是一个缩写属性，它相当于 flex-grow、flex-shrink、和 flex-basis 三个属性的组合。使用 flex 属性可以方便地同时设置这三个属性。

.item {
  flex: <flex-grow> <flex-shrink> <flex-basis>;
}

6. align-self

该属性定义了单个子项在交叉轴上的对齐方式。与 align-items 不同，该属性只影响单个子项，而非所有子项。

.item {
  align-self: auto|flex-start|flex-end|center|baseline|stretch;
}

• auto：子项继承其父容器的 align-items 值。
• flex-start：子项向交叉轴起点对齐。
• flex-end：子项向交叉轴终点对齐。
• center：子项在交叉轴上居中对齐。
• baseline：子项基于它们的基线对齐。
• stretch：子项将被拉伸以适应 Flexbox 容器的高度。

结论

通过了解 Flexbox 容器和 Flex 子项的属性，我们可以更好地设计和控制复杂的布局。当然还有许多其他的属性和技巧，在实践中逐渐掌握。希望这篇文章对你有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67135446ad1e889fe20c1fc2