如何在多行中实现等宽 Flex 项目？

在换行期间保持 Flex 项目等宽

在 CSS 中，实现 Flex 项目即使在换行后也保持相等宽度的布局，可能具有挑战性。

使用Flexbox

使用 Flexbox，虽然可以将项目配置为动态增长以填充容器的宽度，但没有内置功能来确保所有项目的宽度相等，尤其是在最后一行。此限制源于 Flexbox 规范的当前范围。

替代方法：网格布局

网格布局是另一种 CSS3 技术，为最后一个提供了更灵活的解决方案 -行对齐。通过利用 grid-template-columns 属性，即使项目换行为多行，也可以均匀分布项目。

实现

实现所需的布局:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

此代码创建一个基于可用宽度自动列分布的网格。每列可以包含一个或多个弹性项目，其最小宽度为 100 像素，并且弹性宽度会增长以填充列中的剩余空间。 grid-auto-rows 属性将每行的高度设置为 20px，grid-gap 在项目之间添加 5px 的间距。

结论

虽然 flexbox 是一个强大的布局工具，其当前的局限性使得最后一行的等宽对齐具有挑战性。网格布局以其更先进的功能，为这种场景提供了可靠的解决方案。

以上是如何在多行中实现等宽 Flex 项目？的详细内容。更多信息请关注PHP中文网其他相关文章！