CSS flexbox(flex-grow/flex-basis) - 宽度相同,但不再包装

Question

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

我希望flexboxes使用所有可用的水平空间,所以我添加flex-grow:1.

然后我希望同一行上的每个项目具有相同的大小(例如,如果有两个项目则为50%,如果有三个则为33%,等等),所以我补充说flex-basis:0.

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

我能做什么 ？谢谢 !

回答TL; DR:添加min-width: fit-content作品!

的jsfiddle

Answer 1

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

超文本标记语言

<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