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>
flex-basis
for each to be the same