Flex wrap column：用列填充可用宽度

Question

我在 flex 容器中有不同大小的项目，我想根据内容显示在不同宽度的几列中。flex-flow: column wrap固定容器高度对我很有用，但我有固定的容器宽度，并希望高度取决于内容。即我想要尽可能多的列宽度。例如，它的外观：

.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>