Question

我在flex容器中有不同大小的项目，我希望在不同宽度的多个列中显示，具体取决于内容。 flex-flow: column wrap对我来说对固定容器高度有好处，但我有容器的固定宽度，并希望高度取决于内容。即我想要尽可能多的列宽度。例如，它看起来如何：

＆＃13;

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

＆＃13;

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

＆＃13;

使用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>

Flex包裹列：使用列填充可用宽度

1 个答案: