时间戳

首页 > 解决方案 > CSS Flex，最后两项与其他项的宽度不同

css - CSS Flex，最后两项与其他项的宽度不同

问题描述

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

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    flex: 1 0 25%;
}

标签： cssflexbox

解决方案

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

flex: 1 0 25%;

简称：

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

这意味着，所有弹性项目的宽度基础为弹性容器的 25%，而它们不能更小（不收缩），而是因为flex-grow: 1;而占据所有剩余空间。

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

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

2 个 flex-items 将占据 flex-containers 宽度的 50%，

3 个 flex-item 每个将占用 33.3333% 的 flex-containers 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 示例

推荐阅读