CSS Flex，最后两项与其余项的宽度不同[重复]

Posted 2023-03-05

【中文标题】CSS Flex，最后两项与其余项的宽度不同[重复]

【英文标题】：CSS Flex, last two items aren't the same width as the rest [duplicate]

【发布时间】：2019-03-29 23:32:11

【问题描述】：

我有一个容器，其中的项目设置为 flex:1 0 25%;每个大约占三分之一，所以我有 3 行。当谈到只有两个项目的最后一行时，它们每个宽度为 50%，这是为什么呢？

.gallery 
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

.item 
    flex: 1 0 25%;

【问题讨论】：

请添加您所做的代码sn-p。

请提供更多代码 - html 和 css - 您可以将其粘贴到问题中或使用 codepen 或 jsfiddle

因为你给了他们 flex: 1 0 25%; 1 代表 flex--grow: 1;所以你的项目增长......

【参考方案1】：

正如 cmets 中已经提到的，您描述的行为是因为您将 flex 项目的 flex 属性设置为：

flex: 1 0 25%;

简称：

flex-grow: 1;
flex-shrink: 0;
flex-basis: 25%;

这意味着，您所有的弹性项目的宽度基础都是弹性容器的 25%，而它们不能更小（不收缩），而是因为 弹性而占据所有剩余空间-增长：1；

因此，您的弹性项目将表现如下：

1 个弹性项目将占用弹性容器宽度的 100%，

2 个弹性项目将占据弹性容器宽度的 50%，

3 个弹性项目将分别占用 33.3333% 的弹性容器 witdh 等等。

当您有 flex-wrap: wrap;

时，这也恰好适用于

每一行

如果您希望每行有 3 个宽度约为 1/3 的项目，我建议您尝试将 flex 项目的 flex 属性设置为：

flex: 0 0 33.3333%

CodePen： https://codepen.io/anon/pen/jeXMBK?editors=1100#0

如果您正在处理二维布局，您也可以使用 CSS-Grid，这是大多数时候更好的选择。

编辑：添加了 CodePen 示例