Question

我使用flexboxes来组织页面上的元素。

我希望flexbox使用所有可用的水平空间，因此我添加了flex-grow:1。

然后我希望同一行上的每个项目具有相同的大小（例如，如果有两个项目则为50％，如果有三个则为33％，等等），因此我添加flex-basis:0。

但是在第三步，物品不再包裹了。如果我更改窗口宽度，则每行的项目数始终保持不变，并且其内容会被挤压。我不希望这样。我希望当一个项目的宽度小于它的内容时将它放在下一行，因为它在前两个步骤中起作用。我尝试使用flex-shrink和其他东西，但没有成功。

我该怎么办？谢谢！

回答TL; DR：添加min-width: fit-content有效！

JSFiddle

Answer 1

虽然flex-wrap设置为wrap，但是没有为width}定义li，并且flex-basis设置为flex-shrink这意味着flex项的初始主要大小为0.它不会换行，因为它可以缩小到零（即使flex-basis属性为0）。

解决方案＃1

您可以做的一件事是将content属性设置为auto或li { flex-basis: auto; }。

auto

这告诉flex项目考虑其内容的宽度。

jsfiddle demo

flex-basis

弹性项目的初始主要大小。

<强> auto

在Flex项目上指定时，flex-basis关键字将检索该值   使用的主要大小属性auto。如果那个值是   还content，然后使用的值为content。

<强> content

表示基于弹性项目内容的自动调整大小。

注意：请注意，初始版本中不存在auto   灵活的盒子布局，因此一些较旧的实现不会   支持它。通过一起使用auto可以获得相同的效果   主要尺寸（宽度或高度）为flex-basis: 0。

此图表来自flexbox spec 尝试，以解释flex-basis: auto和@media screen and ( max-width: 500px ) { ul { flex-direction: column; } li { flex-basis: auto; } }之间的区别。 Here's a more complete explanation.

解决方案＃2

在较小的屏幕上垂直堆叠弹性项目的另一种方法是更改媒体查询中的flex-direction：

for (UILocalNotification *lNotification in [[UIApplication sharedApplication] scheduledLocalNotifications])
{
    if (![[userRecord valueForKey:@"User"] isEqualToString:[userInfo objectForKey:@"User"]])
    {
        [[UIApplication sharedApplication] cancelLocalNotification:lNotification];

    }
}

jsfiddle demo

Answer 2

如果项目对于窗口宽度来说太大，我会使用媒体查询将元素的flex-direction更改为column。这会将列表中的项目放在彼此之下。

<强> HTML

<ul class="grid__row grid__row--sm">
    <li>1 small</li>
    <li>1 wide wide wide wide wide wide</li>
</ul>
<ul class="grid__row grid__row--sm">
    <li>2 medium medium</li>
    <li>2 small</li>
</ul>
<ul class="grid__row grid__row--md">
    <li>3 small</li>
    <li>3 wide wide wide wide wide wide</li>
    <li>3 medium medium</li>
</ul>

<强> CSS

.grid__row {
    margin: auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-direction: column;
}

.grid__row li {
    background: green;
    color: white;
    margin: 1px;
    padding: 15px;
    display:flex;
    flex: 1;
}

@media (min-width: 480px) {
    .grid__row--sm {
        flex-direction: row;
    }
}

@media (min-width: 768px) {
    .grid__row--md {
        flex-direction: row;
    }
}

JSFiddle

Answer 3

您无法将弹性基础设置为auto或content，因为您希望所有方框的大小相同，因此flex-basis必须为0且{ {1}}设置为flex-grow，正如您所做的那样。您现在需要做的是在弹性项目上设置1（例如min-width）。你的里程可能会有所不同，我相信safari（webkit一直在努力保持自谷歌眨眼之后）可能会因200px上的min-width而出现问题。

或者你可以将flex-basis设置为flex-items属性，即使在safari（min-width）中也应该有效{/ 1}}

flex: 1 0 200px

ul {
    margin: auto;
    padding: 0;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
}
li {
    background: green;
    margin: 1px;
    flex: 1 0 200px;
}

Answer 4

感谢Michael_B和Adam，我找到了解决问题的方法。

flex-grow: 1;
flex-basis: 0;
min-width: fit-content;

fit-content的{{1}}值是此处的关键。它是实验性的（您可能需要添加一个浏览器前缀），但它完全符合我的要求：相同的宽度，带有包装！

CSS flexbox（flex-grow / flex-basis） - 宽度相同，但不再包装

4 个答案:

解决方案＃1

解决方案＃2