Contents
hide
In this lesson, we will learn about Flex Flow property which is pretty straightforward it is a shorthand for flex-direction
and flex-wrap
.
by default, the property is set to row and nowrap which is the default of the individual property.
Flex Flow Property
style.css
.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
index.html
<div class="container d-flex flex-flow-reverse-wrap">
...
</div>
And what you will get to see is:
Similarly
We can also try the column-reverse and wrap-reverse as a value of a flex-flow property
style.css
.flex-flow-col-wrap-reverse {
/* flex-direction: column-reverse; */
/* flex-wrap: wrap-reverse; */
flex-flow: column-reverse wrap-reverse;
height: 150px;
}
And what you will get to see is:
Note:
Property value must be in order to
All combinations of two properties works fine.
Property value must be in order to
{ flex-flow:
<flex-direction
>
<flex-wrap
> }
.All combinations of two properties works fine.
DEMO
See the Pen
Flex by rehmaanali (@geekstrick)
on CodePen.