CSS Flexbox Cheat Sheet for Building Layouts

Due to the technicality of web designs, it can be challenging to use other CSS properties for creating layouts. To overcome this, the CSS Flexbox came into the picture. CSS Flexbox makes it possible for us to build flexible layouts without the use of CSS float and positioning. In this article, we’ll provide a CSS Flexbox cheat sheet and explain hos it is useful. In addition, we’ll learn the Flexbox architecture as well as the different properties of its components.

What is Flexbox?

A Flexible Box Module, also known as a Flexbox, is a mechanism for building layouts in one dimension. Unlike the CSS Grid Layout, which creates a two-dimensional layout by creating rows and columns simultaneously, the Flexbox creates a layout as either a flex row or flex column. Flexbox enables the arrangement of spaces and alignment between elements in a webpage.

Four layout models (block, inline, table, positioned) existed before the Flexbox. However, they lack the flexibility that Flexbox offers, such as resizing, changing orientation, and shrinking and stretching elements of web pages.

Why Use Flexbox?

The Flexbox offers many conveniences for building web pages, and can be used for the following:

• To arrange elements in web pages neatly by aligning them

• To create responsive layouts

• To space the items on web pages

• To wrap many lines (even though it is a single line by default)

• To get maximum flexibility in building layouts

• To set order and sequence while arranging elements of web pages

• To reorder items

• Mobile-friendly development

Flexbox Architecture

The Flexbox architecture comprises two axes:

Main Axis

The flex items (content) move as a group on this axis. The flex-direction property determines the layout position. Therefore, if you have a row, the main axis will be along the row, and if you have a column, it will be along the column. The main axis moves from left to right by default. The starting point is called the main start and the endpoint is called the main end. The distance between the main start and the main end is called main size.

Cross Axis

The cross axis moves perpendicular to the main axis. Thus, if the flex-direction is a row, it moves along the column, and vice-versa. On the cross axis, you can align items against each other and the flex container by moving them individually or as a group. You can also control the flex spacing in wrapped flex lines by treating them as a group. The cross axis moves from top to bottom by default. The starting point is called the cross start and the endpoint is called the cross end. Cross size is the distance between the cross start and the cross end.

Let’s look at a flexbox example regarding the architecture:

Components of Flexbox

Flexbox is comprised of two components:

CSS Flex Container

The CSS flex container is also known as the parent element. Therefore, for us to create a Flexbox, we need the parent element with display: flex set on it. The flex layout allows the container to change the width or height of the item to establish order and fill the best available space, primarily to accommodate all display devices and screen sizes. Simply put, the flex container expands items to fill any open space, or shrinks the space to prevent overflow.

CSS Flex Items

The direct children of the parent element (flex container) are flex items, also called child elements. The flex items appear in a row and start from the main axis' starting edge.

Let’s look at an example of how the CSS flex container and items work:

Flex Container
Four Flex Items contained in a Flex Container
  Box 1  Box 2  Box 3  Box 4

Save this code

The flex items are the flexible boxes (in brown, blue, yellow, and red) inside the purple flex container.

Flex Container Properties

The CSS flex container has several properties that help explain its role in building layouts on our web pages. We’ll discuss these flexbox properties below.

Flex Direction

This CSS flex property establishes how we place flex items in flex containers by determining the direction of the main axis. The flex direction is set to a row by default. However, if we change it to a flex column, the main axis changes and displays the item in a column. The following values are possible with the flex-direction property:

• row value: This value arranges the flex items horizontally, from left to right. Here is an example of how row value works:

Flex Direction
Flex-direction row value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• row-reverse value: This value arranges the flex items horizontally, but from right to left. Let’s see how this works with this example:

Flex Direction
Flex-direction row-reverse value
  Box 1  Box 2  Box 3  Box 4

Save this codeThe outcome:

• column value: This value arranges the flex items vertically, from top to bottom. Here is an example of column value:

Flex Direction
Flex-direction column value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• column-reverse value: This value arranges the flex items vertically, but from bottom to top. Here is an example, below:

Flex Direction
Flex-direction column-reverse value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Flex-wrap

This Flex property defines whether or not a flex item should wrap in the case of insufficient space on one flex line.

To understand flex-wrap, let’s look at the different values for this flex property:

• nowrap value: This is the default setting of flex-wrap. It defines that the flex items will not wrap, as shown below:

Flex Wrap
Flex-wrap nowrap value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• wrap value: This defines that the flex items will wrap if needed:

Flex Wrap
Flex-wrap wrap value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• wrap-reverse value: This defines that the flex items will wrap in the reverse order if necessary, as shown below:

Flex Wrap
Flex-wrap wrap-reverse value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Justify Content

This CSS flex property helps to align the flex items based on the main axis within a Flex container. This occurs when the flex items do not use all open space on the main axis, thereby aligning horizontally. In addition, the property allows you to adjust to the left, center, right or add space between items.

Several values can explain the CSS justify-content property, including the following:

• flex-start value: This is the default value of the CSS justify-content property, and it shows the alignment of the flex items at the beginning of the container, as shown below:

Justify Content
Justify-content flex-start value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• flex-end value: This value shows the alignment of the flex items at the end of the container, like this:

Justify Content
Justify-content flex-end value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• center value: This value aligns the flex items at the center of the container:

Justify Content
Justify-content center value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• space-around value: This value shows the flex items with space before, between, and after the lines, as seen in this example:

Justify Content
Justify-content space-around value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• space-between value: This value shows the flex items with space between the lines:

Justify Content
Justify-content space-between value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Align Items

The align-items property aligns the flex items vertically due to the item's inability to use all available space on the cross-axis. Let’s check out examples of different values of the CSS align-item property in order to understand it better:

• stretch value: This shows the default value of the CSS align-items property, and it fills the flex container by stretching the flex items, as we can see below:

Align items
Align-items stretch value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• center value: This value helps to align the flex items in the middle of the container, like this:

Align items
Align-items center value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• flex-start value: This value helps to align the flex items at the top of the container:

Align items
Align-items Flex-start value
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

• flex-end value: This value helps to align the flex items at the bottom of the container, as shown here:

Align items
Align-items Flex-end value
  Box 1  Box 2  Box 3  Box 4

Save this codeThe outcome:

Align Content

The CSS align-content property helps to align the flex lines by applying flex-wrap; it wraps if there are many flex lines. This is similar to align-items, but it aligns lines instead of aligning flex items. The CSS align-content property can have the following values:

• stretch value: This value shows the CSS align-content property's default value and involves stretching the flex lines to take up the available space, as in the example below:

Align content
Align-content stretch value
  Box 1  Box 2  Box 3  Box 4

Save this codeThe outcome:

• space-between value: This value shows equal space between flex lines:

Align content
Align-content space-between value
  Box 1  Box 2  Box 3  Box 4

Save this codeThe outcome:

• space-around value: This value shows space before, between, and after the flex lines. We can see this in the example below:

Align content
Align-content space-around value
  Box 1  Box 2  Box 3  Box 4

Save this codeThe outcome:

• center value: This value shows the flex lines in the middle of the container:

Align content
Align-content center value
  Box 1  Box 2  Box 3  Box 4

Save this codeThe outcome:

• flex-start value: This value shows the flex lines at the beginning of the container, as shown below:

Align content
Align-content flex-end value
  Box 1  Box 2  Box 3  Box 4

Save this codeThe outcome:

Flex Item Properties

The CSS flex item has many properties that help explain how flex items are arranged to build layouts. We’ll break down these properties below.

Order Property

The order-flex property defines the order of the flex items in the same container. The order value must be a number, and there is a preset value of 0. By default, all flex items are arranged in the order of document flow, and when we apply the order property, we do not need to change the HTML structure.

For example, the order property allows us to change the order of the flex items:

Flex Item Property
Order property
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Align-self Property

The align-self property defines the alignment for the selected item inside the flexible container. This property overrides the default alignment set by the container's align-items property, as we can see in this example:

Flex Item Property
Align-self property
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Flex-grow Property

The flex-grow property defines the rate a flex item will grow compared to the rest of the flex items in the same container. The value must also be a number with a default value of 0. Flex-grow value of 0 means the flex item's width as per content only. A value of 1 means the flex item's width distribution will be equal:

Flex Item Property
Flex grow property
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Flex-shrink

The flex-shrink property defines the rate a flex item will shrink compared to the other flex items in the same flex container. The value must be a number with a default value of 1. We can see how this looks below:

Flex Item Property
Flex shrink property
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Flex-basis

The flex-basis property defines the initial length or width of a flex item. The default value of the flex-basis property is auto. In addition, for the percentage we need, we’ll assign flex-shrink. For example, 30% means the width of the item will be 30%, and the sum of the widths of other items will be 70%, as shown below:

Flex Item Property
Flex basis property
  Box 1  Box 2  Box 3  Box 4

Save this code

The outcome:

Conclusion

CSS Flexbox allows us to build layouts on our web pages in many spectacular and flexible ways. In this article, you’ve learned a variety of ways that you can create layouts using this CSS flexbox cheat sheet. So, flex your development muscles with all these flexible ways of building responsive layouts on your websites!