html – Flex wrap专栏：用列填充可用的宽度

2023年7月4日 155次阅读

我在flex容器中有不同大小的项目,我想在不同宽度的几列中显示,具体取决于内容. flex-flow：柱子包装对我来说对固定容器高度有好处,但我有容器的固定宽度,并希望高度取决于内容.即我想要尽可能多的列宽度.

例子,它看起来如何：

.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解决方案？

最佳答案 没有.用纯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>
点赞