Learn
Flexbox
flex-flow

Like the flex property, the flex-flow property is used to declare both the flex-wrap and flex-direction properties in one line.

.container { display: flex; flex-wrap: wrap; flex-direction: column; }

In the example above, we take two lines to accomplish what can be done with one.

.container { display: flex; flex-flow: column wrap; }

In the example above, the first value in the flex-flow declaration is a flex-direction value and the second is a flex-wrap value. All values for flex-direction and flex-wrap are accepted.

Note: The flex-flow property is declared on flex containers.

Instructions

1.

In the #row-reverse selector, set the flex-flow property to have a direction of row-reverse and to wrap elements. You should be able to accomplish this in one line.

2.

In the #column selector, set the flex-flow property to give elements a direction of column and to wrap elements. You should be able to accomplish this in one line.

Folder Icon

Take this course for free

Already have an account?