Flexbox

Learning Goals

• Explain the difference between a parent and child, and a direct child
• Apply Flexbox to containers to achieve a desired layout

Technical Vocabulary

• Child
• Container
• Direct child
• Item
• Parent

What is Flexbox?

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

Flexbox IRL

Flexbox is used all over the internet. It’s a little tough to learn, but once you know it, it makes your life a lot easier! That’s why it is so popular among front-end developers.

Here are just a few popular pages that use Flexbox:

• Disney Plus uses Flexbox on the top Navbar and the grey bar at the bottom of the landing page
• Lomotif uses Flexbox to control the content on the right side of the landing page (title, subtitle, and two buttons)
• The Ringer uses Flexbox to organize the links in the nav bar at the top of the page. It also uses Flexbox for each “section” of content - usually an image, title, subtitle, author, date, and tag

Parents and Children

Before we start working with Flexbox, we need to make sure we are referring to elements and their relationship to other elements correctly. 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, and a child is nested inside the parent. We will also refer to parents as containers, and children as items.

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

<section class="container">
  <article class="item-in-container"></article>
  <article class="item-in-container"></article>
  <article class="item-in-container"></article>
</section>

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

<section class="container">
  <article class="item-in-container">
    <h2>Title of Article 1</h2>
  </article>
  <article class="item-in-container">
    <h2>Title of Article 2</h2>
  </article>
  <article class="item-in-container">
    <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 child of the section. It is technically a grandchild of the section, and a child of article. The idea of direct child is really important to understand as we work with Flexbox.

(Graphics from CSS Tricks)

Creating a Flex Container

Without Flexbox, 10 colorful articles might look like this:

See the Pen Flexbox: Normal Block Elements by Turing KWK (@turing-kwk) on CodePen.

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

See the Pen Flexbox: Applying Flexbox by Turing KWK (@turing-kwk) on CodePen.

Takeaways:

• To use Flexbox, we need a container element with one or more children inside of it
• The declaration display: flex; should be on the parent’s rule
• The parent won’t be affected, but the way the children elements sit inside the parent may change

Flex helps even things out

Adding display: flex to the CSS rule on the parent makes the parent element a flex container and opens up a world of possibilities.

We can apply a width to each item. If all items can fit in the container at that width, that’s the width they will be. If the width wouldn’t leave enough room for all the items, they will become as wide as they can and remain evenly spaced. In the CodePen below, change the width of the article to several different values and see what happens.

See the Pen Flexbox: Items Too Wide by Turing KWK (@turing-kwk) on CodePen.

Justify Content

In professional apps, we typically 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: Centering Items by Turing KWK (@turing-kwk) on CodePen.

By adding justify-content: center;, the items in the container are now centered instead of being crunched up on the left side of the container.

The justify-content property allows us to control how our content sits in relation to the main axis (for now, this means horizontally).

Align Items

Just like we can control how our content sits in relation to the main axis with justify-content, we have a tool to control how our content sits in relation to the secondary axis. Check out the CodePen below. Try changing the value for align-items to flex-end, then flex-start, and see what happens!

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

Direction

Another CSS property with Flexbox is flex-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

The direction of your flex container defines the main axis.

Here is a visual, created by the amazing Samantha Ming.

Wrap

Now, sometimes we don’t want all our items on the same row or column. We can use the property flex-wrap. It allows items to wrap onto the next line. The three values it takes are:

• no-wrap (default): one line, direction is defined by flex-direction
• wrap: multi-lines, the direction is defined by flex-direction
• wrap-reverse: multi-lines, opposite to the direction defined by flex-direction

See the Pen Flexbox: Wrap by Turing KWK (@turing-kwk) on CodePen.

Flexbox

There is more to learn about Flexbox, but we can do a lot with what we know. It will take a while to get used to; remember to use your Dev Tools and use that border property to help you understand what space each element is taking up.

Practice: Flexbox

Open this CodePen and fork it. This will create a new copy to your account that you can edit.

Your job will be to update the CSS (you'll probably need to add some classes on some HTML elements, too!) so the outcome looks like the screen shot below, but first, take some time to jot down some notes and talk with a partner about how you will approach this.

More Practice

• Finish levels 14 - 24 of Flexbox Froggy
• Can’t get enough of Flexbox Froggy? Try out Flexbox Defense