如何将 Flexbox 项目强制放入两个特定行？

Flexbox：以两行显示项目

在 Flexbox 中，您可以通过在容器上设置 flex-wrap:wrap 轻松地将项目分布在多行中。但是，要强制将项目放入特定的行中，您需要控制元素的大小和间距。

动态调整项目大小的问题

在提供的代码中，您有 8 个带有 flex 的项目-grow: 1，这意味着每个项目将尝试占用尽可能多的可用空间。这可能会阻碍所需的两行布局。

解决方案：控制项目宽度

要创建两行，每行四个项目，您需要为子元素定义固定宽度。修改子样式如下：

.child {
  flex: 1 0 21%; /* Adjust the percentage as needed */
}

• flex: 1 0 21%:

  • 1：将 flex-grow 设置为 1，允许项目to增长
  • 0：将flex-shrink设置为0，防止项目收缩超过21% width
  • 21%：指定每个项目的初始宽度（您可能需要稍微调整这个值）

同时使用 flex-wrap 和定义了项目宽度后，您的项目现在将整齐地排列成两行，每行四个。

以上是如何将 Flexbox 项目强制放入两个特定行？的详细内容。更多信息请关注PHP中文网其他相关文章！