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

概述我在flex容器中有不同大小的项目,我想在不同宽度的几列中显示,具体取决于内容. flex-flow：柱子包装对我来说对固定容器高度有好处,但我有容器的固定宽度,并希望高度取决于内容.即我想要尽可能多的列宽度. 例子,它看起来如何： .container { height: 80px; display: flex; align-items: flex 我在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 >    <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 >    <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>

总结

以上是内存溢出为你收集整理的html – Flex wrap专栏：用列填充可用的宽度全部内容，希望文章能够帮你解决html – Flex wrap专栏：用列填充可用的宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。