CSS - Flex - Flex Flow
About
flex-flow is a css shorthand notation that takes as value:
Articles Related
Example multi-line container
Note: This three examples are based on a row of div an shows the effect of the flex-flow value.
They just differs in their flex-flow value.
They share all:
- the same HTML:
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
- The same css for the first div container and the item children.
.flex {
display: flex;
width: 300px;
margin:2rem;
}
.item {
width: 80px;
background-color: SkyBlue;
border: 1px solid #e7e7e7;
text-align: center;
box-sizing: border-box;
height: 20px;
}
row wrap
.flex {
flex-flow: row wrap;
}
row-reverse wrap-reverse
.flex {
flex-flow: row-reverse wrap-reverse;
}
column wrap
.flex {
flex-flow: column wrap;
width: 160px;
height: 60px;
box-sizing: border-box;
}