html - Flex 换行列 : fill the available width with columns

Question

我在 flex 容器中有不同大小的元素，我想根据内容显示在不同宽度的几列中。 flex-flow: column wrap 对固定容器高度的我很有用，但我有固定的容器宽度，并希望高度取决于内容。 IE。我想要适合宽度的列数。例如，它的外观:

.container {
        height: 80px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column wrap;
        align-content: left;
    }
    .container > span {
        margin: 3px 12px;
        background: #ebd2b5
    }

<div class="container">
    <span>Apple</span>
    <span>Apricot</span>
    <span>Avocado</span>
    <span>Banana</span>
    <span>Bilberry</span>
    <span>Blackberry</span>
    <span>Blackcurrant</span>
    <span>Blueberry</span>
    <span>Boysenberry</span>
    <span>Currant</span>
    <span>Cherry</span>
    <span>Cherimoya</span>
    <span>Cloudberry</span>
    <span>Coconut</span>
</div>

有 CSS 的解决方案吗？

Answer 1

没有。使用纯 CSS，您不能。

但是，如果您使用align-content: stretch;，您可以将当前列分布到整个容器宽度。

.container {
        height: 80px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-flow: column wrap;
        align-content: stretch;
    }
    .container > span {
        margin: 3px 12px;
        background: #ebd2b5
    }

<div class="container">
    <span>Apple</span>
    <span>Apricot</span>
    <span>Avocado</span>
    <span>Banana</span>
    <span>Bilberry</span>
    <span>Blackberry</span>
    <span>Blackcurrant</span>
    <span>Blueberry</span>
    <span>Boysenberry</span>
    <span>Currant</span>
    <span>Cherry</span>
    <span>Cherimoya</span>
    <span>Cloudberry</span>
    <span>Coconut</span>
</div>