Flex Flow

on May 1, 2020
🔥 1257 views
Contents hide
1) Flex Flow Property
2) Similarly
2.1) DEMO

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:
flex-flow

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:
flex-flow reverse

Note:
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.