I am trying to make a columns layout work using flexbox. I encountered a problem when I tried to make each column of text wrap on to the next line when it does not have any more space. My problem could be seen in the image below.
I tried to set flex: 1 250px as from what I understand, it should set flex-basis to 250px, which means if the space is not large enough for the item of 250px, that item should wrap on to the next line, but the result I received was weird: only one item was able to wrap.
What I am trying to achieve is similar to the image below, where each item should wrap when there is not enough space.
I have tried to find answers to this, but most of them have the problems of setting a fixed width, which I do not have, and I can’t figure out where the problem is…
My codes:
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
flex: 1;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: red solid 1px;
}<div class="list">
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
</div>Thanks
1
Quoting from MDN:
Your .list-item will only wrap once there is not enough space to place another item in a row, a new flex line is created. New lines are created as needed until all of the items are placed. As the items can grow, they will expand to fill each row completely. If there is only one item on the final line it will stretch to fill the entire line.
To solve your problem you can add flex: 1 1 300px; to your .list-item class, this will wrap the item once your width goes below 300px.
See this Codepen Exampls
You were almost there with flex: 1 250px.
This set flex-grow and flex-basis.
But it didn’t set flex-shrink, which means the default setting (flex-shrink: 1) remained active, allowing items to shrink as much as possible to fit within the row.
Disable flex-shrink. Try this instead: flex: 1 0 250px.
.list {
display: flex;
flex-wrap: wrap;
}
.list-item {
flex: 1 0 250px; /* modified */
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
outline: red solid 1px;
}<div class="list">
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
<div class="list-item">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam omnis quibusdam animi. Voluptatibus nobis quo reprehenderit ipsam id quaerat pariatur.</p>
</div>
</div>