Understanding CSS Flexbox (Part 1)

This is the first of a two-part series tutorial. This part focuses on what flexbox is and flexbox container properties. The second part talks about flex item properties.

That said, let's get started!

What is Flexbox

The Flexible Box Module is a layout method that distributes space along a single row or column. Unlike other layout methods, flexbox provides an efficient way to flexibly(properly) layout, align and distribute space among items in a container.

Here's a link to MDN's definition of Flexbox.

Basic Terminologies

In order to understand flexbox, we should first talk about some terminologies associated with flexbox. Note that these terminologies will be used throughout this tutorial.

• Flex container: According to MDN, a flex container is an area of a document laid out using flexbox. This is the parent element which holds the children elements. It could be a div, ul etc.
• Flex item: A flex item is a child within the flex container.
• Main axis: The main axis of a flex container is defined as the direction in which the flex items are laid out.
• Cross axis: The cross axis is the axis perpendicular to the main axis. For example, if the flex-direction of your container is set to row, that is items are positioned horizontally, then the cross axis will run along the column and vice versa.

The figure below helps you understand the terminologies better.

Flexbox terminologies

Flexbox in Action

Now that you know the basics of flexbox, let's see it in action. The first thing to do when using flexbox is to define the flex container. To do this, you set the property display: flex on the parent container.

The HTML below holds a container div(parent element) and other divs(child elements). We will use this to explain CSS flexbox in details.

  <div class="container">
      <div></div>
      <div></div>
      <div></div>
  </div>

To see flexbox in action, add the property display: flex.

  .container {
      display: flex;
   }

Add some style to the children divs

  .container > div {
      background-color: maroon;
      min-height: 100px;
      margin: 10px;
      width: 100px;
   }

This is what the output should look like.

I'll explain what just happened. By setting the property display: flex on the parent div, you immediately make the parent element a flex container and the children elements the flex items.
As you may or may not have known, div is a block element and you may have expected the output to be something like this.

Well by default, flexbox makes the flex items inline elements automagically(yay! I finally used this word) which makes the flex items stack horizontally instead of vertically. You can decide to make the flex items stack vertically or in a reverse direction by adding a property called flex-direction but I'll let you digest what you've learned and explain it in the next section.

Flex Container Properties

Flex container has some properties that enable you style flex items however you want. The flex container properties are explained below.

1. Flex-direction: The flex-direction property controls the direction of the flex items. It allows you to change the direction of the flex items.
The flex-direction property takes in any of the four values: row, row-reverse, column, column-reverse. These properties allow you to align the flex items horizontally(main-axis) or vertically(cross-axis).
By default, the flex-direction property is set to row. This is why the first image of the container element laid all flex items horizontally from left to right.
Let's change the flex-direction property to column and see what happens.

  .container {
      display: flex;
      flex-direction: column
   }

This is what you should have.

Flex items stacked vertically(top to bottom)

The value of the flex-direction property allowed us to change the direction of the flex items hence allowing the items to flow from top to bottom.

Note that by setting the flex-direction property to column, The main axis runs along the vertical axis while the cross axis runs along the horizontal axis.

See the image below

Main and cross axes

2. Flex-wrap: Flex-wrap property allows flex items to fit on multiple lines. By default, the flex-wrap property is set to nowrap which means that the flex items are set to fit on one line only.
When the flex-wrap property is set to nowrap, flex items no matter the number will shrink to ensure they fit on one line.

Let me explain further with an example. I'll add five more divs to the parent element.

  <div class="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
  </div>

  .container {
      display: flex;
   }

What will the output look like? Well, let's see.

Add more items to the parent element

You'll notice that the items had to shrink in order to fit on one line.

Let's now set flex-wrap property to wrap

  .container {
      flex-wrap: wrap
   }

See output below

Flex-wrap set to wrap

You'll notice that the flex items didn't shrink or try to fit on one line. Instead, the flex items retained their default width and pushed the remaining divs unto a new line when it couldn't fit on one line anymore.

The flex-wrap property also takes another value called wrap-reverse. wrap-reverse works like wrap in the reverse direction.

  .container {
      flex-wrap: wrap-reverse;
   }

Flex-wrap set to wrap-reverse

3. Justify-content: The justify-content property align items on the main axis in the container. Justify-content property uses any of these values: flex-start, flex-end, center, space-around, space-between, space-evenly.

- Flex-start: Flex-start lines up all flex items from the start of the container. By default, the justify-content property is set to flex-start. This is why all flex items are stacked horizontally from left to right.

  <div class="container">
      <div></div>
      <div></div>
      <div></div>
  </div>

  .container {
      display: flex;
      justify-content: flex-start;
   }

The output will look like this:

justify-content set to flex-start

- Flex-end: Flex-end lines up all flex items to the end of the container.

  .container {
      justify-content: flex-end;
   }

justify-content set to flex-end

- Center: Center aligns all flex items to the center of the container.

  .container {
      justify-content: center;
   }

justify-content set to center

- Space-evenly: Space-evenly distributes space evenly around each item in the container.

  .container {
      justify-content: space-evenly;
   }

justify-content set to space-evenly

- Space-around: Space-around assigns space on the left and right of each flex item in the container. The difference here is that space-around assigns half the amount of space to each side of the flex item. For example, if a margin/space of 20px exists between div 1 and 2, 10px is assigned to the right of div 1 while the other 10px is assigned to the left of div 2. Hence, the margin/space on the left and right of each flex item is 10px. But since div 1 is the first item in the container, it will have a margin of 10px on the left and a margin of 20px on the right due to the margin assigned to div 2 on the left.

  .container {
      justify-content: space-around;
   }

justify-content set to space-around

- Space-between: For space-between, the first and last items are laid out at the edge of the container, while the remaining space is evenly distributed around the other items in the container.

  .container {
      justify-content: space-between;
   }

See the output below.

justify-content set to space-between

4. Align-items: The Align-items property align items on the cross axis of the container. Just like other properties, the align-item property takes on a number of values such as flex-start, flex-end, center, stretch.

- Stretch: This "stretches" the flex items to fill the entire container on the cross axis. The default value for the align-items property is stretch. This is why all items occupy the entire space on the cross axis by default.

We would add a height of 300px to the parent container to see the stretch value in action.

  .container {
      display: flex;
      min-height: 300px;
      align-items: stretch;
   }

Note that you don't need to add the property align-items: stretch because it is the default value on align-items. I just added it for better understanding.

align-items set to stretch

Notice how the flex-items stretched to fill the entire contaner.

- Flex-start: Items are laid out from the start of the container along the cross axis.

  .container {
      align-items: flex-start;
   }

align-items set to flex-start

- Flex-end: As expected, Items are laid out from the end of the container along the cross axis.

  .container {
      align-items: flex-end;
   }

align-items set to flex-end

- Center: Centers all flex items on the center of the container along the cross axis.

  .container {
      align-items: center;
   }

align-items set to center

5. Flex-flow: Flex-flow is a combination of flex-direction and flex-wrap property. It takes in two values: flex-direction and flex-wrap values respectively. It could take it any of these values:

  .container {
      flex-flow: row wrap || column wrap || row nowrap;
   }

You can try other combinations to see the result.

Conclusion

Now that you've learned the basics of flexbox, you can take a step further by building something simple like a website template using flexbox.

Below is a sample application I built using flexbox.

Application built using flexbox

Thanks for reading!