CSS Flexbox #12. The flex-flow shorthand property

In past tutorials of this series, you learned about the flex-direction and the flex-wrap properties. They determine the orientation of flex items.

They also determine if flex-items wrap over to the next line or stay on the same line according to the available space in the layout.

The flex-flow shorthand property puts both properties together. Let’s take a look at an example!

Step #1. Create the HTML

• Open your preferred code editor.
• Create an empty HTML file.
• Visit this page, copy the HTML code and save the file.

Step #2. Create the CSS

You have to add some basic styles first.

• Create a file called style.css (the file is already linked in the head tag of the HTML code).
• Copy and paste this code:

/* GLOBAL STYLES */ * 
{ 
box-sizing: border-box; } 
body { background-color: #AAA; } 
.item { padding: 2rem; border: 5px solid #87b5ff; border-radius: 3px; 
font-size: 2em; 
font-family: sans-serif; 
font-weight: bold; 
background-color: #1c57b5; 
}

Step #3. Create the Flexbox Styles

The first step is to declare the flex container.

• Edit the CSS code:

/* FLEXBOX STYLES */ .container { display: flex; background-color: #f5ca3c; }

Now you have a flex container with 4 flex items. In order to give each item a fixed “ideal” (in case there’s enough space available) width, you use the flex-basis property.

• Edit the CSS code:

.item { flex-basis: 50%; }

Step #4. The flex-flow Shorthand

As already stated, the flex-flow property is a shorthand for the flex-direction and the flex-wrap properties combined.

The default values are row and nowrap.

• Edit the CSS code in order to test these values:

.container { display: flex; background-color: #f5ca3c; flex-flow: row; }

You will not see any difference because the flex-flow property is using the default nowrap value.

• Edit the CSS code once again:

.container { display: flex; background-color: #f5ca3c; flex-flow: row wrap; }

Now items wrap over to the next line. Each item is now as wide as specified within the flex-basis property (50 % of the container).

You can now test the different possible values for flex-direction.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; flex-flow: row-reverse wrap; }

Items are displayed from right to left and wrap over to the next line.

On the Block Axis

It is necessary to declare a fixed height value on the container in order to test this property on the block axis. That is because the main container is only as tall as the elements contained inside it. So each item would pile on each other in case you don’t declare a height for the container.

• Edit the CSS code:

.container { display: flex; background-color: #f5ca3c; height: 300px; flex-flow: column wrap; }

• Edit the CSS code one more time:

.container { display: flex; background-color: #f5ca3c; height: 300px; flex-flow: column-reverse wrap; }

Now the items wrap over to the next column if there is no more vertical space available as you can see in the image. This technique comes very handy for static layouts.

I hope you liked this tutorial. Thanks for reading!

Previous tutorials of this series

• CSS Flexbox #1. Creating Your First Flexbox Layout
• CSS Flexbox #2. How to Use the justify-content Property
• CSS Flexbox #3. The align-items Property
• CSS Flexbox #4. The flex-grow Property
• CSS Flexbox #5. The flex-shrink Property
• CSS Flexbox #6. The flex-basis Property
• CSS Flexbox #7. The order Property
• CSS Flexbox #8. The flex-wrap Property
• CSS Flexbox #9. The align-content Property
• CSS Flexbox #10. The flex Shorthand Property
• CSS Flexbox #11. Shorthand Default Values