如何使 Flexbox 项目换行到多行，同时保持比例大小？

Flexbox：在多行中显示项目

在 Flexbox 中，实现多行布局可能具有挑战性。考虑这样一个场景，其中八个项目预计会动态调整大小并对齐在两行中，每行四个项目。要解决这个问题，需要进行一些关键调整。

首先，确保将 flex-wrap 设置为在容器元素上换行。这会覆盖默认的 nowrap 设置，允许项目分成多行。

但是，主要障碍在于分配给 Flex 项目的 flex-grow: 1 属性。虽然此属性按比例分配可用空间，但它可能会妨碍换行。由于 Flex 项目中没有内容，它们将缩小到零宽度并保持在一行上。

解决方案是指定项目的宽度。通过应用 flex: 1 0 21%;，项目将：

• Flex: 1 - Flex 项目将弯曲以填充可用空间。
• 0 - Flex 项目的最小宽度为零，允许它们收缩。
• 21% - Flex 项目的首选宽度为 21%，确保它们容纳内容并在容器内均匀分布。

以上是如何使 Flexbox 项目换行到多行，同时保持比例大小？的详细内容。更多信息请关注PHP中文网其他相关文章！