CSS: Flexbox

Learning Goals

• Explain the difference between a parent and child element, be able to identify direct children
• Apply Flexbox to containers in order to achieve a desired layout

Vocabulary

• parent
• child
• container
• item
• Flexbox
• property
• value

What is FlexBox?

Flexbox is a part of CSS that provides a more efficient way to lay out, align and distribute space among items in a container. It helps us when we have those silly block elements, that even with display: inline-block, can be hard to do just what we want them to do.

Self Guided Learning

You’ve been provided with a chunk of time to dedicate to learning and practicing Flexbox. If the lesson format is helpful, you can continue reading and use this as you main resource! If you prefer starting with documentation, blog posts, of different tutorials, you can absolutely do that. We’ve provided you with some links to start with.

• CSS Tricks - Flexbox
• MDN Documentation
• freeCodeCamp Blog Post
• Scrimba Video that accompanies blog post above
• Flexbox Froggy - great practice!
• Flexbox Defense - more practice!

Parents and Children

As we start working with Flexbox, a very important distinction should be pointed out. We need to be careful about the CSS rules we apply to a parent element vs. those to a child element. A parent element wraps other elements, a child is nested inside the parent.

Let’s look an some HTML to make sure we are all on the same page:

<section>
  <article></article>
  <article></article>
  <article></article>
</section>

In the code above, the section is the parent element, and the 3 articles are all children elements because they are directly nested inside of that section. Let’s looks at one more example:

<section>
  <article>
    <h2>Title of Article 1</h2>
  </article>
  <article>
    <h2>Title of Article 2</h2>
  </article>
  <article>
    <h2>Title of Article 3</h2>
  </article>
</section>

In the code above, we now have these h2 elements nested inside of the articles. It’s important to know that h2 is not a direct child of the section. It is technically a grandchild, and a child of article. The idea of direct child is really important to understand as we work with Flexbox.

When we use Flexbox, we will make the parent elements flex containers and the children elements flex items. There isn’t really a difference between the two, but you’ll need to know that vocabulary to successfully navigate documentation.

(Graphics from CSS Tricks)

NOTE: Many of the examples used in this document contain a set of colored boxes. However, you won’t find the styles for those boxes in the CSS. They are loaded in the CSS Pen settings, thanks to whoever made this!

Creating a Flex Container

Without Flexbox, 10 colorful articles might look like this:

See the Pen Flexbox: Normal Blocks Els by Turing School (@turing-school) on CodePen.

But with Flexbox, we can start having some control over them:

See the Pen Flexbox: Creating a Container by Turing School (@turing-school) on CodePen.

After applying display: flex; to the container, we observe that the items are now aligned in a horizontal row.

Flex Direction

Another CSS property with Flexbox is direction. This property takes one of four values:

• row (default): left-to-right
• row-reverse: opposite of row (right-to-left)
• column: same as row but top to bottom
• column-reverse: same as column but bottom to top

Justify Content

We frequently see white space (margin or padding) used, and the content is centered on the screen. We can use Flexbox to center content:

See the Pen Flexbox: Justify Content by Turing School (@turing-school) on CodePen.

But the items are still all crunched together. They might need some breathing room too, which can be achieved with margin!

The justify-content property allows us to control how our content sits on the main axis.

In the section above, you should have observed that justify-content: center; had a different impact - it centered the items vertically. Since flex-direction: column; was applied, the main axis was the vertical axis. justify-content will apply it’s values to the items along the main axis.

Align Items

Just like we can control how our content sits on the main axis with justify-content, we have a tool to control how our content sits on the cross-axis. Check out the CodePen below.

See the Pen Flexbox: Align-Items by Turing School (@turing-school) on CodePen.

Since display: flex; was applied and no further declarations were made for the direction, the default direction is row, or horizontal. So, align-items: center; centered the items in relation to the vertical axis, or the cross-axis.

If we add the declaration flex-direction: column, we will see the items center themselves along the vertical axis, or cross-axis.

Solo Challenge

NOTE: This is optional if you are following this as a self-guided tutorial.

Now that you have had some experience implementing Flexbox on a comp that you have encountered, it’s time to apply these skills to a new comp! We have selected a few common design layouts that you can implement with Flexbox. Follow the steps below for implementation:

Collection Grid

Pricing Table

Further Exploration

While you may not use the following properties as frequently, it’s working reading through some documentation on them should you have a use-case in the future:

• flex-wrap
• flex-grow
• align-contents