I've set up a series of three containers and applied display: flex;
and flex-wrap: wrap;
to them but they aren't wrapping when I reduce the window size?
I've put the code below and seem to be getting nowhere in terms of getting to the root of the problem.
body {
font-family: arial;
}
p {
color: white;
}
.container {
background-color: #666;
width: 800px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
padding: 10px;
box-sizing: border-box;
}
.item1 {
flex: 1;
background-color: red;
}
.item2 {
flex: 1;
background-color: blue;
}
.item3 {
flex: 1;
background-color: green;
}
<div class="container">
<div class="item item1">
<h1>ITEM1</h1>
<p>flex: 1</p>
</div>
<div class="item item2">
<h1>ITEM2</h1>
<p>flex: 1</p>
</div>
<div class="item item3">
<h1>ITEM3</h1>
<p>flex: 1</p>
</div>
</div>
If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .
If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap . Items will then wrap in the container.
An alternative to using flex-wrap: wrap would be to switch from flex-direction: row to column using a media query. Show activity on this post. An other alternative to flex is to remove display: flex on the container and use display: inline-block on all item images.
The flex-shrink property is a sub-property of the Flexible Box Layout module. It specifies the “flex shrink factor” which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when there isn't enough space on the row.
You need to use max-width
instead of width
on the container, you have to allow the container to shrink for the items to wrap.
body {
font-family: arial;
}
p {
color: white;
}
.container {
background-color: #666;
max-width: 800px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
padding: 10px;
box-sizing: border-box;
}
.item1 {
flex: 1;
background-color: red;
}
.item2 {
flex: 1;
background-color: blue;
}
.item3 {
flex: 1;
background-color: green;
}
<div class="container">
<div class="item item1">
<h1>ITEM1</h1>
<p>flex: 1</p>
</div>
<div class="item item2">
<h1>ITEM2</h1>
<p>flex: 1</p>
</div>
<div class="item item3">
<h1>ITEM3</h1>
<p>flex: 1</p>
</div>
</div>
Here's why the items aren't wrapping:
You have a flex container set to width: 800px
.
The container has three flex items set to flex: 1
, which is shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: 0
This means that the actual width of each item is 0
(flex-basis: 0
), and each item is sized based on the available space on the line (flex-grow: 1
).
So, in effect, you've sized each item to be one-third of the space on the line, whatever that may be. Therefore, each item can shrink to width: 0
, and they will never wrap.
If you add content and/or width
and/or flex-basis
to one or more items, and the items grow to exceed 800px (the width of the container), then your flex items will wrap.
But note, they won't wrap based on your re-sizing of the browser window, because the container doesn't occupy width: 100%
of the viewport. They will only wrap based on the width of the container.
body {
font-family: arial;
}
p {
color: white;
}
.container {
background-color: #666;
width: 800px;
height: 200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.item {
padding: 10px;
box-sizing: border-box;
}
.item1 {
flex: 1 0 250px;
background-color: red;
}
.item2 {
flex: 1 0 250px;
background-color: blue;
}
.item3 {
flex: 1 0 400px;
background-color: green;
}
<div class="container">
<div class="item item1">
<h1>ITEM1</h1>
<p>flex: 1 0 250px</p>
</div>
<div class="item item2">
<h1>ITEM2</h1>
<p>flex: 1 0 250px</p>
</div>
<div class="item item3">
<h1>ITEM3</h1>
<p>flex: 1 0 400px</p>
</div>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With