如何使用Flexbox保证每行4个项目？

Flexbox：每行强制执行 4 个项目

在响应式设计领域，Flexbox 提供了用于布局元素的强大工具。然而，实现特定布局并不总是那么简单，例如强制每行固定数量的项目。

理解问题

如原始查询中所述，目标是显示 8 Flexbox 容器中的项目，同时保持每行 4 个项目的一致排列。默认情况下，flexbox 会沿着可用空间均匀分布项目，当项目数量超过所需宽度时，通常会导致行不均匀。

解决方案：覆盖 Flex-Grow

在这种情况下，该问题源于应用于各个弹性项目的 flex-grow 属性。 Flex-grow 指示项目扩展 пропорционально 以占据任何可用空间。然而，由于项目没有定义宽度，它们会不断缩小到零并且永远不会换行。

强制每行包含特定数量的项目的关键是定义弹性项目的宽度。通过设置固定宽度，每个项目占据预定的空间，当超出可用空间时强制它们换行。

实现

以下 CSS 代码演示了如何确保显示 8 个项目2 行，每行 4 个：

.parent {
  display: flex;
  flex-wrap: wrap;
}

.child {
  flex: 1 0 21%;
  margin: 5px;
  height: 100px;
  background-color: blue;
}

• Flex：1 0 21%; - 此 Flex 简写属性：

  • 1: 指示项目按此值的比例增长（如果有可用空间）。
  • 0: 设置项目的最小宽度以防止其
  • 21: 将单个项目的宽度定义为父容器宽度的 21%。根据 Flex 值，这可确保每行容纳 4 个项目。
• Flex-wrap:wrap; - 允许项目换行到下一行当容器宽度不足时。

结论

通过为flex设置固定宽度项目并启用弹性包装，可以在弹性盒布局中强制每行特定数量的项目。这项技术使设计师能够更好地控制其网页元素的响应能力和布局。

以上是如何使用Flexbox保证每行4个项目？的详细内容。更多信息请关注PHP中文网其他相关文章！