A flex container can be either single-line or multi-line, depending on the flex-wrap property.
This three examples are based on a row of div an shows the effect of the flex-wrap value. They just differs in their flex-wrap and flex-direction value (Ie known as the flex-flow)
They share all:
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
.flex {
display: flex;
margin:2rem;
background: #9decf9;
}
.item {
width: 80px;
height: 20px;
background-color: SkyBlue;
border: 1px solid #e7e7e7;
text-align: center;
box-sizing: border-box;
}
The default value is nowrap and does not take the width into account.
.flex {
flex-direction: row;
width: 300px;
/* flex-wrap: nowrap; */
}
.flex {
flex-direction: row;
flex-wrap: wrap;
width: 300px;
}
Below we have included the code in a iframe with a size of 300px and the behavior is the same.
When it wraps:
.flex {
flex-direction: row;
flex-wrap: wrap;
}
.flex {
flex-direction: row;
flex-wrap: wrap-reverse;
width: 300px;
}
.flex {
flex-direction: row-reverse;
flex-wrap: wrap-reverse;
width: 300px;
}
Note that a size via the height and width should be given
.flex {
flex-direction: column;
flex-wrap: wrap;
width: 300px;
height: 60px;
}
.flex {
flex-direction: column;
flex-wrap: wrap-reverse;
width: 300px;
height: 60px;
}
You can set flex-wrap also via the shorthand notation flex-flow property