In this lesson, we will learn about Flex Flow property which is pretty straightforward it is a shorthand for flex-direction and flex-wrap.
flex-direction
flex-wrap
by default, the property is set to row and nowrap which is the default of the individual property.
.flex-flow-reverse-wrap { /* flex-direction: row-reverse; */ /* flex-wrap: wrap; */ flex-flow: row-reverse wrap; }
As you can see above we can use any combination of flex-direction and the flex-wrap and use in a single property which is flex-flow and the screen will adjust according to that properties. and your markup would be
<div class="container d-flex flex-flow-reverse-wrap"> ... </div>
And what you will get to see is:
We can also try the column-reverse and wrap-reverse as a value of a flex-flow property
.flex-flow-col-wrap-reverse { /* flex-direction: column-reverse; */ /* flex-wrap: wrap-reverse; */ flex-flow: column-reverse wrap-reverse; height: 150px; }
{ flex-flow:
}
See the Pen Flex by rehmaanali (@geekstrick) on CodePen.