A Comprehensive Guide to CSS Flex Layout

Flex is a powerful CSS layout model that simplifies the process of designing flexible and responsive elements on your website

In this guide, we’ll explore the fundamentals of Flexbox and delve into each of its properties, looking at their functionality and how they lay out on a website.

What is Flex?

Before looking the different flex properties, let’s start by explaining what flex actually is.

Flex is a display CSS styling option. Display defines how an element is displayed on a website.

Here are a few examples of how you would style an element on your website using ‘display: flex’.

div {display:flex;}
.my-container {display: flex;}
.content .item .sub-item {display: flex;}

Flex Properties

Once you assign ‘display: flex’ to a CSS element, you can begin customising how you want your flex to behave.

Flex Direction

.my-container {display: flex; flex-direction:row;}
/* or */
.my-container {display: flex; flex-direction:column;}
/* or */
.my-container {display: flex; flex-direction:row-reverse;}
/* or */
.my-container {display: flex; flex-direction:column-reverse;}

Here are the four ways ‘flex-direction’ can be used. It’s pretty simple from here, using ‘row’ will display your items in a row and using ‘column’ will display your items in a vertical column. For ‘row-reverse’ and ‘column-reverse’ your elements are placed the same way but in a reversed order.

Here’s an example when using ‘flex-direction: row’:

Here’s an example when using ‘flex-direction: row-reverse’:

Flex Wrap

.my-container {display: flex; flex-wrap:wrap;}
/* or */
.my-container {display: flex; flex-wrap:nowrap;}

In scenarios where flex items exceed the width or height of the container, the ‘flex-wrap’ property can be used to prevent items trying to squish onto one line.

Here’s an example what happens if you do not use ‘flex-wrap: wrap’:

Here’s an example what happens if you use ‘flex-wrap: wrap’:

Align Content

.my-container {display: flex; align-content:center;}
/* or */
.my-container {display: flex; align-content:flex-start;}
/* or */
.my-container {display: flex; align-content:flex-end;}
/* or */
.my-container {display: flex; align-content:space-around;}
/* or */
.my-container {display: flex; align-content:space-between;}
/* or */
.my-container {display: flex; align-content:stretch;}

For multi-line flex containers, ‘align-content’ enables developers to align lines of items along the cross axis, similar to ‘justify-content’ but on a container level.

Most of these are quite self explanatory, for example, ‘align-content: center’ aligns your elements centrally. ‘align-content: flex-start’ aligns your content from the start of the container and vice versa for ‘align-content: flex-end’.

‘align-content: space-around’ and ‘align-content: space-between’ try to evenly space your elements to your preferences. The best way to understand these is to use the flex panel in the Google Developer Tools (F12 on your Keyboard):

Justify Content Flex

.my-container {display: flex; align-content:center;}
/* or */
.my-container {display: flex; align-content:flex-start;}
/* or */
.my-container {display: flex; align-content:flex-end;}
/* or */
.my-container {display: flex; align-content:space-between;}
/* or */
.my-container {display: flex; align-content:space-around;}
/* or */
.my-container {display: flex; align-content:space-evenly;}

This property allows developers to horizontally position flex items within the container.

Most of these are quite self explanatory again, and I find that the best way to see what these can do, is to look at the flex panel in the Google Developer Tools (F12 on your Keyboard):

Here’s an example what happens if you use ‘align-content: space-evenly’. In this example I have applied the CSS styling to the button row, and they are now space evenly within the container:

Align Items

.my-container {display: flex; align-content:center;}
/* or */
.my-container {display: flex; align-content:flex-start;}
/* or */
.my-container {display: flex; align-content:flex-end;}
/* or */
.my-container {display: flex; align-content:space-between;}
/* or */
.my-container {display: flex; align-content:stretch;}
/* or */
.my-container {display: flex; align-content:baseline;}

This property allows developers to vertically position flex items within the container.

This property is particularly useful when dealing with containers containing multiple rows or columns of flex items.

Here’s an example what happens if you use ‘align-items: baseline;’. In this example I have applied the CSS styling to the button row, and they are now space evenly within the container:

Conclusion

Flexbox is a game-changer in web layout design, offering developers easy control and flexibility of web elements.

By mastering its properties, you can create responsive, visually stunning layouts that adapt effortlessly to different screen sizes and devices!