Intro to 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.

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.

graphic of parent/container graphic of child/item
(Graphics from CSS Tricks)

Explore Flexbox

Fork this CodePen to your account. One-by-one, uncomment lines 3, 4, 12, 13, and 14. Take note of what impact each “uncomment” has. Identify the containers and items each time Flexbox is used. After you make predictions about what each declaration does, read up on them on CSS Tricks. Do not read about every single thing on the page; use cmd + f to search for specific properties!

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: https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-340/flexbox-playground.css !

Creating a Flex Container

Without Flexbox, 10 colorful articles might look like this:

See the Pen Flexbox: Normal Blocks Els by Amy Holt (@ameseee) on CodePen.


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

See the Pen Flexbox: Creating a Container by Amy Holt (@ameseee) 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: Centering Items by Amy Holt (@ameseee) on CodePen.


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

Try It: Justify Content

On the container’s CSS rule, change the code to: justify-content: space-between;. What happens?

Now try: justify-content: space-around;. What is the difference between space-around and space-between?

Finished early? Learn about even more values that we can provide to justify-content with CSS Tricks.

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

Try It: Justify Content

On the container’s CSS rule, change the code to: flex-direction: column; justify-content: center;. What happens? Why do you think that is?

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 Amy Holt (@ameseee) 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.

Put It All Together

Now that you have had a chance to play around with some of properties of flexbox - let’s solidify our learning. Please complete the Flexbox Froggy exercises before moving on to the Practice section!

Practice

You will be assigned a portion of the Dog Party comp to recreate - but with Flexbox this time! You’ll be given a starter kit with the HTML you should use and some CSS. Follow the protocol below:

  • Fork each CodePen to your account.
  • Navigator - use notes from this lesson and navigate your driver towards implementing Flexbox!
  • Once you’ve achieved the comp, the driver should explain what each new line of CSS is doing.

Dog Party Starter Kits:

Once you have finished, submit each one of your CodePen links on the following submission form!

Solo Challenge

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:

Instructions

  1. Create a new repo on GitHub called Flexbox Comp Challenges
  2. Create the following files: collection-grid.html, pricing-table.html, collection-styles.css, and pricing-styles.css
  3. Re-create the following comps using Flexbox - work on making small, atomic commits! Feel free to take creative liberty on color schemes, fonts, placeholder images/logos, etc.
  4. Once you have finished, submit your GH repo link here.

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

Lesson Search Results

Showing top 10 results