👋 Welcome! If your goal is to learn CSS Flexbox, this tutorial is for you. We will cover the basics of Flexbox and how you can use it to create beautiful website layouts.

Let's begin! ✨

Starter Code

First of all, let's start with something that you are probably very familiar with:

Yes, HTML and CSS! 😁

We are starting with this HTML structure. Essentially, we only have a div inside the body. We will be modifying it as necessary to show how these CSS properties work.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div></div>
  </body>
</html>

This is the CSS stylesheet that we are linking to our HTML file:

* {
  margin: 0;
  padding: 0;
}

div {
  height: 200px;
  width: 200px;
  background-color: #154de7;
}

This is what the div looks like right now:

I promise you that we will be making creating more interesting that this blue box. 😉

💡

Tip: We will gradually add more divs to create more complex layouts.

Are you ready? Let's begin! ⭐

🔹 What is CSS Flexbox?

We will start with a brief introduction to this layout model.

With CSS Flexbox, you can control and customize the alignment, spacing, and order of the items within a container.

Like its name implies, it's is very closely related to CSS. Actually, it's part of CSS and you can use it to make your websites look exactly how you want them to look on devices of all sizes.

The best part about it is that i's already built-in into CSS, so you don't need to install or add anything to use it. You just need to learn a few CSS properties and values and you can use it directly in your stylesheet.

Awesome. Now you know what CSS Flexbox is, so let's see why you should it. ✨

🔹 Why use CSS Flexbox?

With CSS Flexbox, you can:

Control how items are aligned within a container.
Implement responsive web designs.
Reorder the items with CSS.
Create complex layouts with nested structures within the containers.

CSS Flexbox can be super helpful for you as a web developer. You should use it if you need to:

Find a quick and easy way to align items.
Control the spacing between the items.
Scale the items to fit screens of different sizes.
Order the items in a specific way.

💡

CSS Flexbox is a one-dimensional layout model. You can use it to create layouts within specific containers. But if you need to create the main layout of an entire website, I would suggest combining it with CSS Grid. CSS Grid is a two-dimensional model that gives you more power and flexibility for the overall layout. You can combine CSS Flexbox and CSS Grid whenever you need to.

🔹 CSS Flexbox Components

CSS Flexbox has two main components that you should be familiar with:

Flex containers
Flex items

We will be working with them throughout this tutorial. Here you can see a visual representation of their hierarchy:

A graphical representation of a flex container and flex items in a flex layout.

Now let's define them.

Flex Containers

Flex containers are the HTML elements that contain flex items. These containers determine how the elements they contain will be arranged and ordered.

💡

You can create a flex container with the display: flex property. We will see this in more detail in just a moment.

Even if you don't see the container on the website because it has no visible style applied to it (like no background color or no border), it can still be in the HTML structure to determine the layout and distribution of the flex items it contains.

Flex Items

Flex items are the HTML elements that are directly contained within the flex containers. The container defines how they are arranged and where they are located.

🔹 CSS Flexbox Container Properties

We can use many different CSS properties to customize the layout. Let's see the properties that we can assign to flex containers.

🔸 display: flex

display: flex;

If you assign the flex value to the display property of any HTML element, you will immediately transform it into a flex container.

Yes! It's that easy. 🤩

By default, a flex container will:

Align all the flex items it contains in a row.
The row will start on the left of the flex container.
The items will not wrap to new lines, they will shrink if needed to fit the same row.
The items will stretch vertically to fill their container.

💡

Each one of these characteristics corresponds to a CSS property that you can assign and customize. We will see them in just a moment. 😉

"Non-Flex" Container

Let's see the default layout of a non-flex container. This is what you would see if you don't assign display: flex.

By default:

The inner items are placed on the top left of their parent.
Each item is on a new row.

(HTML and CSS for this example:)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

.container {
  width: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  color: white;
  font-size: 50px;
  width: 200px;
  margin: 5px;
  padding: 5px;
  height: 200px;
  background-color: #154de7;
}

Flex Container

But what if we add the display: flex property to the .container selector?

Let's see what happens... 🤔

⬆️ Now we have a flex container with three flex items. The flex items are rearranged and scaled to fit on one row, side by side. By default, they are also stretched vertically to fill the container.

This is the CSS for this example. It's exactly the same, we only added the display: flex property:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex; /* New CSS Property Here */
  width: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  color: white;
  font-size: 50px;
  width: 200px;
  margin: 5px;
  padding: 5px;
  height: 200px;
  background-color: #154de7;
}

Amazing, right? We did all of this with just one CSS property. 😁

🔸 Multiple Flex Containers?

If we use the display: flex value, our flex container will be at the block level, which means that there will be nothing else on the same row, not even other containers.

As an example, if we add a second container to our HTML with exactly the same structure, we will see them stacked vertically, even if there is room to display both of them side by side.

You can see this here:

This is our HTML for this example. The CSS is exactly the same as before. We just added a second container with the same structure and items in the HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

/* No changes here */
* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  color: white;
  font-size: 50px;
  width: 200px;
  margin: 5px;
  padding: 5px;
  height: 200px;
  background-color: #154de7;
}

But if we need to create more complex layouts with multiple containers, we also have another flexbox option for the display property that can be super helpful.

Let's see it.

🔸 display: inline-flex

display: inline-flex;

To show multiple flex containers side by side on the same row, we can use the display: inline-flex property instead.

This is an example:

We just need to change the value of the display property to inline-flex.

.container {
  display: inline-flex; /* Change the value */
  width: 400px;
  padding: 5px;
  background-color: #ff890e;
}

💡

inline-flex can be helpful for creating more complex layouts with multiple flex containers.

🔹 Aligning Flex Items

Great. Now that you know how to create flex containers with super powers, let's see how you can align and distribute flex items with CSS Flexbox. 🤔

This is super flexible and there are many CSS properties that you can combine to get the perfect layout for your website.

To understand how this works, you should know about the axes of a flex container and why they have a fundamental role in CSS Flexbox. Let's see them.

🔸 The Main Axis and the Cross Axis

Every flex container has two axes:

The main axis determines the direction in which flex items are placed.
The cross axis is always perpendicular to the main axis.

By default, the main axis is the horizontal axis while the cross axis is the vertical axis.

However, we can interchange them with the flex-direction property to get something like this:

Now the main axis is vertical and the cross axis is horizontal.

🔸 flex-direction

With the flex-direction property, you can interchange the main and the cross axis.

💡

This is super helpful for stacking items vertically.

These are the values that flex-direction can take:

`row`

flex-direction: row;

Main axis: Horizontal.
Cross axis: Vertical.

With this value, the items are positioned horizontally from left to right, starting from the top-left corner of the flex container.

`row-reverse`

flex-direction: row-reverse;

Main axis: Horizontal.
Cross axis: Vertical.

With this value, the items are positioned horizontally but in reverse order from right to left, starting from the top-right corner of the flex container.

💡

Notice how now the items are in reverse order, with the number 1 located to the right.

`column`

flex-direction: column;

Main axis: Vertical.
Cross axis: Horizontal.

With this value, the items are positioned vertically, starting from the top-left corner of the flex container.

`column-reverse`

flex-direction: column-reverse;

Main axis: Vertical.
Cross axis: Horizontal.

With this value, the items are positioned vertically but in reverse order, starting from the bottom-left corner of the flex container.

💡

Notice how the element with the number 1 is at the bottom because the order was reversed.

💡

Reversing the order of the HTML elements with CSS can be super helpful for implementing buttons that reverse list order without using JavaScript.

🔸 justify-content

The justify-content property defines how flex items should be positioned along the main axis of the container.

💡

Unless you change the orientation of the main axis, justify-content acts on the horizontal axis, from left to right.

Let's check out the possible values of justify-content and their effect on the layout. We will be using this HTML structure for the example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

And this CSS stylesheet:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 500px;
  height: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  color: white;
  font-size: 50px;
  width: 80px;
  margin: 5px;
  padding: 5px;
  height: 200px;
  background-color: #154de7;
}

We will customize the justify-content property with each possible value and see how this changes the layout. 😁

`flex-start`

justify-content: flex-start;

This is the default value.
Items are aligned to the left of the container.
No extra space is added between them.

`flex-end`

justify-content: flex-end;

This aligns the items to the right of the container.
No extra space is added between them.

A web page with three blue vertical rectangles labeled "1," "2," and "3" on an orange background.

`center`

justify-content: center;

This value centers the items within the container.
No extra space is added between the items.

💡

Even if no "extra space" is added, the margin and padding of the individual items are always present and will not be modified.

A web browser window displaying a page with an orange background and three blue rectangles numbered 1, 2, and 3 in white text.

`space-around`

justify-content: space-around;

Distributes the items evenly along the container.
Assigns the same space before and after each item.
It adds space before the first item and after the last item too.

💡

The space between the items is doubled because the same space is added before and after each item.

A web browser window displaying three blue vertical rectangles labeled "1", "2", and "3" on an orange background.

`space-between`

justify-content: space-between;

space-between assigns equal space between the items.
It does not add space before the first item or after the last item.

A web page displaying three vertical blue rectangles labeled "1," "2," and "3" on an orange background.

Great. 🎉 Now that you know more about justify-content, we will talk about its complement, align-items.

They are very closely related. Let's see why.

🔸 align-items

The align-items property positions the items along the cross axis.

💡

align-items is usually used for arranging items vertically because by default, the cross axis is the vertical axis (unless you customize this).

Let's see the values that align-items can take and their effect on the layout:

`flex-start`

align-items: flex-start;

If the cross axis is vertical, the items are aligned to the top of the container.
If the cross axis is horizontal, the items are aligned to the left of the container.

💡

Notice that now we are referring to the cross axis. Remember that when the main axis is horizontal, the cross axis is vertical and vice versa.

`flex-end`

align-items: flex-end;

Aligns all items to the end of the cross axis.
If the cross axis is vertical, the items are aligned to the bottom of the container.
If the cross axis is horizontal, the items are aligned to the right of the container.

`center`

align-items: center;

This value centers the items along the cross axis.

In this example, the cross axis is vertical, so the flex items are centered vertically:

`stretch`

align-items: stretch;

This will stretch the items from top to bottom or from left to right of the container (based on the direction of the cross axis).
It only affects the elements that do not have a specified height.

💡

To get this default "stretching" effect, I removed the height property from the .item class selector in the CSS stylesheet.

`baseline`

align-items: baseline;

The baseline value is a bit more detailed. We will need to change our HTML and CSS a bit to see how it works. We will assign different heights to the items and center the text vertically.

We will do this by adding ids to the <div> elements and then using these ids in the CSS selectors.

Please take a moment to check out the changes:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <!-- New ids -->
      <div class="item" id="item1">1</div>
      <div class="item" id="item2">2</div>
      <div class="item" id="item3">3</div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 500px;
  height: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  color: white;
  font-size: 50px;
  width: 80px;
  margin: 5px;
  padding: 5px;
  background-color: #154de7;
}

/* Different Heights */
#item1 {
  height: 150px;
}

#item2 {
  height: 80px;
}

#item3 {
  height: 300px;
}

This is what our example looks like now (we have not added the align-items: baseline property yet):

They have different heights but they are all aligned at the top.

But what if we want something a bit different? Like aligning the text inside the items instead of the items themselves?

With the baseline value, we can align the items at the baseline of their text instead.

The MDN Web Docs mentions the following for this value:

All flex items are aligned such that their flex container baselinesalign. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

For example, if we center the text of the items vertically and we set align-items: center in the container, we get this:

Here we have the HTML and the CSS for this example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item" id="item1">1</div>
      <div class="item" id="item2">2</div>
      <div class="item" id="item3">3</div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  /* Align items at the baseline */
  align-items: baseline;
  width: 500px;
  height: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  display: flex;
  /* Center the text vertically inside the items */
  align-items: center;
  color: white;
  font-size: 50px;
  align-items: center;
  width: 80px;
  margin: 5px;
  padding: 5px;
  background-color: #154de7;
}

#item1 {
  height: 150px;
}

#item2 {
  height: 80px;
}

#item3 {
  height: 300px;
}

These are the values that you can assign to the align-items.

Now let's see how you can fill a flex container with flex-grow.

🔸 flex-grow

With the flex-grow property, you can specify if the items should "grow" to fill the flex container and how they should do it (what proportions they should have relative to each other).

The items will grow either horizontally or vertically, based on the direction of the main axis.

💡

The flex-grow property is assigned to the flexitems directly (not to the flex container).

💡

The default value of flex-grow is 0, so items do not grow at all.

Here we have the current state of our HTML and CSS.

Everything is essentially the same as when we started, with the additional ids. We are also removing the fixed width from the .item selector because the items will now "grow" to fill the free space.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item" id="item1">1</div>
      <div class="item" id="item2">2</div>
      <div class="item" id="item3">3</div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 500px;
  height: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  color: white;
  font-size: 50px;
  margin: 5px;
  padding: 5px;
  background-color: #154de7;
}

#item1 {
  height: 150px;
}

#item2 {
  height: 80px;
}

#item3 {
  height: 300px;
}

The values of flex-grow are integers without units. They represent the proportion of the space that the item should take in comparison to the other flex items in the container (if there is space available for them to grow).

For example, this value of 2 would make an item take twice the size as the other items in the container if there is space available:

flex-grow: 2;

If we customize the flex-grow value to make the middle element take twice the size of the other two items (if there is space available), we get this layout:

#item1 {
  flex-grow: 1;
  height: 150px;
}

#item2 {
  /* Take twice the space of the other two items */
  flex-grow: 2;
  height: 80px; 
}

#item3 {
  flex-grow: 1;
  height: 300px;
}

💡

Since the main axis is horizontal by default, the items will grow horizontally by default.

💡

If all the items in the container have the same growth factor, they will take the sameamount of space. You can experiment with different proportions and combinations to create your perfect layout.

🔸 flex-shrink

flex-shrink is like the counterpart of flex-grow.

Instead of "growing", now we will determine how items will "shrink" to adjust to smaller devices and the proportion in which they will shrink relative to each other.

💡

This property will only have an effect if the total width of all the flex items is greater than the width of the flex container.

💡

By default, flex-shrink is 1. This means that all the elements will have the same proportion as they shrink.

💡

A value of 0 means that the element will never shrink.

As the value of this property increases, the item will shrink more significantly as the screen gets smaller.

In this example, I increased the width of the items and assigned a flex-grow factor to each one of them. You can see that the first item does not shrink as much as the other two.

Here we have the HTML and CSS:

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  width: 500px;
  height: 400px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  /* Updated this so that the total width of the items 
    is greater than the width of the container */
  width: 600px;
  color: white;
  font-size: 50px;
  margin: 5px;
  padding: 5px;
  background-color: #154de7;
}

#item1 {
  /* Shrinks at a lower rate */
  flex-shrink: 1;
  height: 150px;
}

#item2 {
  /* Shrinks at a medium rate */
  flex-shrink: 2;
  height: 80px;
}

#item3 {
  /* Shrinks at a higher rate */
  flex-shrink: 3;
  height: 300px;
}

💡

Since we are talking about growing or shrinking items, it's also very important to know that the margins are not affected by these properties. They will stay exactly the same.

🔸 flex-basis

Awesome. 🎉 Now you know how to make items grow or shrink to fit the size of the container. This is super helpful for creating responsive layouts.

So now it's time to dive into flex-basis. ✨

This property defines the initial width of a flex item before any available space is distributed according to the values of the flex factors for shrinking or growing.

💡

flex-basis is defined on the flex item. Its value should have a particular unit or be a sizing keyword.

💡

An important difference between flex-basis and width is that flex-basis can only be applied to a flex item.

For setting the width in flex-basis, you can use the units that we are used to working with in CSS, including em, px, and %.

This property also accepts the following keywords:

max-content
min-content
fit-content

You can size the item automatically based on its content with the content value.

🔸 The `flex` Shorthand

And if you are thinking that there must be a shorter way to set these properties, actually there is! We have shorthands for them.

We can use the flex property as a shorthand for the flex-grow, flex-shrink, and flex-basis properties.

You just need to write their values in this order:

flex: <flex-grow> <flex-shrink> <flex-basis>;

When you write this:

flex: 2 3 250px;

You are writing something equivalent to this:

flex-grow: 2;
flex-shrink: 3;
flex-basis: 250px;

But in a much more concise way (which is always helpful! 😁).

The flex property can also take two values instead of three in case you don't need to customize all three properties.

With two values, you can either set:

flex-grow and flex-shrink
flex-grow and flex-basis

💡

You cannot set flex-shrink and flex-basis with only two values. It's not a valid combination of values for this property.

This is an example where we set flex-grow and flex-shrink:

flex: 2 3;

And here we are defining flex-grow and flex-basis:

flex: 2 50px;

But you might be asking this right now... If the two alternatives have two values, how can I differentiate them and know which properties I'm setting? 🤔

That's a great question. 🤩

Notice that in the first alternative, none of the values have units because they represent factors.

That is the key difference between these two combinations.

In the second alternative, the second value has a unit (in this case, px). That's how we know that it's flex-basis. If it doesn't have a unit, it's flex-shrink.

Interesting, right?

🔸 flex-wrap

Wrapping items is also essential for creating responsive layouts. They should adapt when necessary, readjusting to fit the size of their container.

With flex-wrap, we can tell our browsers that the items inside the flex container should move to the next line when there isn't enough space to show them on the same line.

💡

flex-wrap is defined in the flex container.

💡

This is an alternative to shrinking the items such that they will always fit on the same row.

These are the values that flex-wrap can take:

`nowrap`

flex-wrap: nowrap;

If you choose nowrap, the items will not be wrapped onto a new row.

Even if the width of the screen is smaller than the width of the container, the items will always be on the same row.

`wrap`

flex-wrap: wrap;

In contrast, when you choose wrap, the items that do not fit on the same row are moved onto the next row, like in a "fluid" layout.

For example, if we have these three items inside a flex container and they fit on the same line on a larger screen:

With wrap, the items will readjust and move to the next line if necessary:

We can see this on an even smaller screen size:

This is the HTML and CSS:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap; /* Wrap to a new line */
  padding: 5px;
  background-color: #ff890e;
}

.item {
  width: 120px;
  height: 200px;
  color: white;
  font-size: 50px;
  margin: 5px;
  padding: 5px;
  background-color: #154de7;
}

🔸 align-content

And now we reached align-content.

Do you remember the align-items property that we saw just a few minutes ago?

Now we have another property that is very similar (but you had to understand flex-wrap before I showed you this one!). 😉

While the align-items property that we saw previously aligns the items within the same row, the align-content property is focused on the "big picture".

It controls how the rows themselves are positioned and distributed along the cross axis when there are multiple rows within the same flex container.

💡

align-content is defined on the flex container.

To show you this, we will need to add more HTML elements to create multiple rows:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>CSS Flexbox</title>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 600px;
  padding: 5px;
  background-color: #ff890e;
}

.item {
  width: 80px;
  height: 200px;
  display: flex;
  color: white;
  font-size: 50px;
  margin: 5px;
  padding: 5px;
  background-color: #154de7;
}

Let's see the values that align-content can take:

`stretch`

align-content: stretch;

This is the default value of align-content. When this property is set to stretch, the rows will try to stretch to fill the flex container along the cross axis.

`flex-start`

align-content: flex-start;

With flex-start, all the rows align to the start of the cross axis.

This could be the top of the container if the cross axis is vertical or the left of the container if the cross axis is horizontal.

`flex-end`

align-content: flex-end;

flex-end aligns all the rows to the end of the cross axis.

This could be the bottom of the container if the cross axis is vertical or the right of the container if the cross axis is horizontal.

`center`

align-content: center;

This value places all the rows at the center of the container along the cross axis.

💡

flex-start, flex-end, and center do not add any additional space between the rows. They just control their alignment.

`space-between`

align-content: space-between;

space-between distributes all the rows evenly along the cross axis, without adding extra space before the first one or after the last one.

`space-around`

align-content: space-around;

space-around distributes all the rows evenly along the cross axis, adding extra space before the first one or after the last one.

💡

A quick tip for remembering the difference between space-between and space-around is to associate around with "having space around the rows too". This mnemonic has been very helpful for me. 😉

🔸 The `flex-flow` Shorthand

Great. Congratulations on making it to this part of the tutorial. 🤩

Let me show you a super helpful shorthand for declaring flex-direction and flex-wrap:

flex-flow: <flex-direction> <flex-wrap>;

💡

Since these two properties have different sets of possible values, you can write them in any order and the result will be exactly the same.

This is an example where we set row-reverse as the flex direction and wrap the items:

flex-flow: row-reverse wrap;

🔹 Container vs. Item Properties

Before we end this guide, I would like to share with you a list of the CSS Flexbox properties that we covered and where they are declared because it can be a bit tricky to know if you should define them in the flex container or in the flex item itself.

I recommend keeping this list as a reference. 😉

Container

display
justify-content
align-items
align-content
flex-wrap
flex-direction
flex
flex-flow

Item

flex-grow
flex-shrink
flex-basis

And here we have a summary of the shorthands you learned. They can be super helpful to write more concise CSS once you understand the principles behind each property.

🔹Shorthands

flex is a shorthand for flex-grow, flex-shrink, and flex-basis:

flex: <flex-grow> <flex-shrink> <flex-basis>;

flex-flow is a shorthand for flex-wrap and flex-direction:

flex-flow: <flex-direction> <flex-wrap>;

🔹 Review Questions

And I think you will agree with me when I say that this old saying is absolutely true:

"Practice makes perfect"

So here are some multiple-choice questions to help you review what you just learned:

What CSS property/value combination is used to create a flex container?
1. display: block
2. display: inline
3. display: flex
4. display: grid
Which property defines the direction of the main axis in a flex container?
1. flex-wrap
2. flex-direction
3. align-items
4. justify-content
What is the default value of the flex-grow property?
1. 0
2. 1
3. 2
4. 3
Which property is used to align flex items along the cross axis in a flex container?
1. justify-content
2. align-content
3. align-items
4. flex-basis
How can you make flex items move to the next line if there isn't enough space in the container?
1. justify-content: center
2. align-items: stretch
3. flex-wrap: wrap
4. flex-direction: column

I will include the answers at the end of the article, so you can review them. 😁

🔹 Summary

Flexbox is a one-dimensional CSS layout model based on flex containers and flex items.
You can choose how to stretch, shrink, align, and wrap flex items to create the layout that you envision.
Flex containers have a main axis and a cross axis. With CSS properties, you can change the layout and size of the flex items based on these axes.
Properties declared on the flex containers determine how flex items will be distributed. You can also declare certain properties on the flex items themselves.

Congratulations! 🎉 You've reached the end of this comprehensive guide on CSS Flexbox. Now you should have a solid understanding of what CSS Flexbox is, why it's useful, and how you can use it to create flexible and responsive layouts.

With these new skills and a bit of practice, you are definitely one step further on your path to creating beautiful websites and web applications.

Thank you so much for reading my article! 😊 To find more coding tips and tutorials, follow me on YouTube (Coding with Estefania) and X (@EstefaniaCassN).

Have an awesome day. 🔅

💡

Like I promised, here are the quiz answers: (1. 3) (2. 2) (3. 1) (5. 3)

CSS Flexbox Tutorial - A Comprehensive Guide for Beginners

A Visual Flexbox Guide for Beginners

Table of contents

Starter Code

🔹 What is CSS Flexbox?

🔹 Why use CSS Flexbox?

🔹 CSS Flexbox Components

Flex Containers

Flex Items

🔹 CSS Flexbox Container Properties

🔸 display: flex

"Non-Flex" Container

Flex Container

🔸 Multiple Flex Containers?

🔸 display: inline-flex

🔹 Aligning Flex Items

🔸 The Main Axis and the Cross Axis

🔸 flex-direction

row

row-reverse

column

column-reverse

🔸 justify-content

flex-start

flex-end

center

space-around

space-between

🔸 align-items

flex-start

flex-end

center

stretch

baseline

🔸 flex-grow

🔸 flex-shrink

🔸 flex-basis

🔸 The flex Shorthand

🔸 flex-wrap

nowrap

wrap

🔸 align-content

stretch

flex-start

flex-end

center

space-between

space-around

🔸 The flex-flow Shorthand

🔹 Container vs. Item Properties

Container

Item

🔹Shorthands

🔹 Review Questions

🔹 Summary

`row`

`row-reverse`

`column`

`column-reverse`

`flex-start`

`flex-end`

`center`

`space-around`

`space-between`

`flex-start`

`flex-end`

`center`

`stretch`

`baseline`

🔸 The `flex` Shorthand

`nowrap`

`wrap`

`stretch`

`flex-start`

`flex-end`

`center`

`space-between`

`space-around`

🔸 The `flex-flow` Shorthand