如何创建每行四个项目的两行 Flexbox 网格？

Flexbox：创建每行四个项目的两行网格

Flexbox 提供了强大的布局系统，用于创建动态和响应式网页。一个常见的用例是创建一个类似网格的布局，随着视口大小的变化自动包装其项目并调整其大小。

问题：将项目包装成多行

在您的特定场景中，您面临的问题是您的 Flexbox 容器在一行中显示八个项目，而不是将它们分成两行，每行四个项目

解决方案：了解 Flexbox 属性

为了强制将项目分成两行，我们需要调整两个 Flexbox 属性：flex-wrap 和 flex-grow。

flex-wrap：包裹

flex-wrap 属性控制容器中的项目是否可以换行以形成多行。通过将其设置为换行，您可以允许项目根据需要流到新行。

flex-grow: 1

flex-grow 属性控制如何物品在容器内分配多余的空间。值为 1 意味着每个项目将按比例增长以填充其行上的可用空间。

问题：覆盖默认值

在原始代码中，flex -wrap 设置为换行，但 Flex 项目上的 flex-grow 设置为 1。这导致项目增长到占据整个可用宽度，从而阻止它们包裹。

修复：定义项目宽度

要解决此问题，我们需要为项目定义特定的宽度，以便它们不会过度增长并强制包装。在更正后的代码中，我们使用了具有三个值的 flex 属性：

1. flex: 1 0 21%; - 第一个值 (1) 将项目的增长因子设置为 1，与 flex-grow: 1 相同。
2. flex: 1 0 21%； - 第二个值 (0) 将项目的收缩系数设置为 0，这意味着它不会收缩到指定宽度以下。
3. flex: 1 0 21%; - 第三个值 (21%) 将项目的初始宽度设置为容器宽度的 21%。

通过定义项目的宽度，我们确保它们适当地包装成两行，每行四个项目。

以上是如何创建每行四个项目的两行 Flexbox 网格？的详细内容。更多信息请关注PHP中文网其他相关文章！