Column Flex wrap: fill available width with columns
I have items of different sizes in a flex container that I want to display in multiple columns of different widths, depending on the content. flex-flow: column wrap
works well for me with a fixed container height, but I have a fixed width for the container and the height is required depending on the content. That is, I want the number of columns to match the width. An example of how it should look:
.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>
Any solutions with CSS?
+3
source to share
1 answer
Not. With pure css, you can't.
However, if you are using align-content: stretch; , you can extend the current columns to the full width of the container.
.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>
+1
source to share