Flex-wrap does not wrap when I reduce the window size
I installed a series of three containers and used display: flex;
, and flex-wrap: wrap;
to them, but they did not turn around when I reduce the size of the window?
I have placed the code below and there seems to be nowhere to go in terms of how to get 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>
source to share
You need to use max-width
instead width
in a container, you have to allow the container to shrink to wrap items.
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>
source to share
This is why elements are not wrapped:
You have flex container installed on 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 element is 0
( flex-basis: 0
), and each element is sized based on the available space on the line ( flex-grow: 1
).
This way you are effectively defining each element to one third of the space on the line, whatever that is. Therefore, each element can shrink up width: 0
and they will never be wrapped.
If you are adding content and / or width
and / or flex-basis
to one or more elements and the elements grow to 800px (container width) then your flex items will wrap.
But note that they will not wrap based on the resize of the browser window as the container does not occupy width: 100%
the viewport. They will only be processed to fit 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>
source to share