Back to Notes

Aug 19, 2024

CSS Flexbox Overview

A quick overview of CSS Flexbox

Flexbox has been the go-to layout system for modern web development for over a decade. It is utilized in many popular frameworks like Bootstrap, and Foundation ––I have a fair bit of experience with the latter, however, outside of Foundation, I have not had much experience with Flexbox. So, I thought I would write a quick overview of the technology to help my understanding, and maybe yours too.

Please note: I am adding some base styles to the outputs below, to help visualize the flex containers and items. These styles will not be included in the code snippets.

Flex Containers

Flexbox is initialized by setting the display property of an element to flex. This element is now a flex container, its’ children are flex items. The first, and important thing to note: Flexbox has two axes, the main and cross axis. The main axis is the primary axis of the flex container, and the cross axis is perpendicular to the main axis. The flex-direction determined the main axis direction. The default value is row, which means the main axis runs horizontally.

See the example below:

Code:
.container {
  display: flex;
  flex-direction: row;
}
<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>
Output:
1
2
3

As mentioned above, the default value for flex-direction is row, but we can also set it to column to make the main axis run vertically. See the example below:

Code:
.container {
  display: flex;
  flex-direction: column;
}
Output:
1
2
3

This is important to note because the direction of the main axis will alter the behavior of some of the flex properties we will discuss in the next section.

Justify Content

The justify-content property aligns flex items along the main axis. The default value is flex-start. No example is needed, as this looks the same as the first example above. But suppose we want to align the items to the end of the main axis, we can set the value to flex-end. See the example below:

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
Output:
1
2
3

Pretty cool, wouldn’t you agree? Next, let us check out the 'center'. This is self-explanatory.

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
Output:
1
2
3

'space-between' will space the items evenly along the main axis, with the first item at the start, and the last item at the end.

Code:

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
Output:
1
2
3

'space-around' will space the items evenly along the main axis, with equal spacing on either side of each item.

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
Output:
1
2
3

Remember that if the flex-direction property is set to column, the main axis will run vertically, and the justify-content property will align the items along the vertical axis.

Example:

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
Output:
1
2
3

Align Items

The align-items property is used to align flex items along the cross-axis. 'flex-start' is the default value, and will align the items to the start of the cross-axis.

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
}
Output:
1
2
3

'flex-end' will align the items to the end of the cross-axis (bottom of the container).

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-end;
}
Output:
1
2
3

'center' will align the items to the center of the cross-axis.

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
}
Output:
1
2
3

Once again, if the flex-direction property is set to column, the align-items property will align the items along the horizontal axis.

Flex Wrap

The flex-wrap property controls how flex items wrap within the flex container. The default value is nowrap, which means all items will be on a single line.

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: nowrap;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Notice how the items are getting squished? We can set the value to wrap to allow the items to wrap to the next line.

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

If you are on a desktop, resize the window to see the items wrap to the next line.

Align Content

The align-content property is used with flex-wrap: wrap to align the wrapped lines of flex items. The values are the same as justify-content, but they align the wrapped lines of items along the cross-axis. I will run through the values quickly.

Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-start;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: flex-end;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: center;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: space-between;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Code:
.container {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: flex-start;
  flex-wrap: wrap;
  align-content: space-around;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Flex Gap

The gap property is used to add space between flex items. This is a shorthand property for row-gap and column-gap. The default value is 0.

Code:
.container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
Output:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Flex Glow

The flex-grow property is used to specify how much an item will grow relative to the other items in the container. The default value is 0, which means the item will not grow. If we set the value to 1, the item will expand to fill the available space.

Code:
.container {
  display: flex;
  flex-direction: row;
}

.flex-item:first-child {
  flex-grow: 1;
}
Output:
1
2
3

Flex Shrink

The flex-shrink property is used to specify how much an item will shrink relative to the other items in the container. Let us set the value to 5. If able, resize the window to see how the items shrink at different rates.

Code:
.container {
  display: flex;
  flex-direction: row;
}

.flex-item {
  flex-grow: 1;
}

.flex-item:first-child {
  flex-shrink: 5;
}
Output:
1
2
3

Flex Basis

The flex-basis property is used to specify the initial size of an item before it is flexed. The default value is auto, which means the item will be sized based on its content. If we set the value to 200px, the item will be 200 pixels wide.

Code:
.container {
  display: flex;
  flex-direction: row;
}

.flex-item {
  flex-grow: 1;
}

.flex-item:first-child {
  flex-basis: 200px;
}
Output:
1
2
3

Flex

The flex property is a shorthand property for flex-grow, flex-shrink, and flex-basis. The default value is 0 1 auto. If we set the value to 1 1 200px, the item will grow to fill the available space, shrink at the same rate as the other items, and have an initial size of 200 pixels.

Code:
.container {
  display: flex;
  flex-direction: row;
}

.flex-item {
  flex: 1 0 200px;
}
Output:
1
2
3

Align Self

The align-self property aligns a single flex item along the cross-axis. The values are the same as align-items, except they only apply to a single item. If we set the value to flex-end, the item will align to the end of the cross-axis.

Code:
.container {
  display: flex;
  flex-direction: row;
}

.flex-item:first-child {
  align-self: flex-end;
}
Output:
1
2
3

Order

The order property is used to specify the order of a flex item within the container. The default value is 0. If we set the last item to -1, it will be displayed first.

Code:
.container {
  display: flex;
  flex-direction: row;
}

.flex-item:last-child {
  order: -1;
}
Output:
1
2
3

This is not generally recommended, for accessibility reasons, but it is good to know.

Hopefully, this overview of CSS Flexbox was helpful. I certainly learned a lot from writing it. I will use Flexbox more in the future, and I hope you will too.

Thanks for reading!

Noted by: KeithKeith