如何使用 Flexbox 均匀分布宽度不均匀的元素？

Flexbox 将不均匀的宽度分配给元素

问题：

您正在使用 Flexbox 创建带有项目数量不同（3-5），但宽度并未均匀分布

分析：

Flexbox 默认的 flex-basis 属性为“auto”，这意味着元素的大小根据其内容而定。在您的示例中，文本内容较大的元素占用更多空间。

解决方案：

为了确保均匀分布，请设置 flex-basis: 0。初始弹性基础为零，允许剩余空间基于弹性增长按比例分配。必须设置 flex-grow 的值以确保它们均等扩展。

代码：

li {
    flex-grow: 1;
    flex-basis: 0;
    /* ... */
}

说明：

flex-basis 的零值确保导航项以相同的大小开始，无论内容如何。然后，flex-grow 为 1 会使它们均匀扩展以填充剩余空间。

以上是如何使用 Flexbox 均匀分布宽度不均匀的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！