CSS Flexbox

Learning Goals

• Explain what flexbox is and why its an important tool for creating layouts
• Explain the difference between a parent and child element, be able to identify immediate children
• Apply Flexbox to containers in order to achieve a desired layout

Pre-Work

Read through Intro to Layout Pre-Work lesson and all links provided and complete exercises provided in it. Be prepared to demonstrate your understanding of the concepts in that document when you come to this class.

Vocabulary

• flexbox - a layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces
• display - a css property that sets whether an element is treated as a block or inline element and the layout used for its children, such as grid or flex
• flex parent or flex container - Any HTML element that has been given the display: flex declaration
• flex child or flex item - Any immediate descendants of a flex parent
• main axis – the primary axis along which flex items are laid out. It can be horizontal or vertical, and is defined by the direction set by the flex-direction property.

What is Flexbox?

Flexbox is a part of CSS that provides an efficient way to lay out, align and distribute space among items in a container. Before flexbox became popular, it was a real challenge to center elements. We would use something called float, which could behave unpredictably at times.

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 review the parent <> child relationships. Which element is the parent and which are its children?

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

What about in this block of HTML?

<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>

(Graphics from CSS Tricks)

Justify Content

justify-content allows us to define the alignment of items (flex children) along the main axis, and is incredibly useful for centering elements.

• flex-start (default): items are packed toward the start line
• flex-end: items are packed toward to end line
• center: items are centered along the line
• space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-around: items are evenly distributed in the line with equal space around them
• space-evenly: items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

Here is a great example of how you can use justify-content to move your items:

See the Pen Flexbox & justify-content by CSS-Tricks (@css-tricks) on CodePen.

The above Codepen is an example from CSS Tricks

Flex 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 flex-direction property defines 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.

• stretch (default): stretch to fill the container (still respect min-width/max-width)
• flex-start: cross-start margin edge of the items is placed on the cross-start line
• flex-end: cross-end margin edge of the items is placed on the cross-end line
• center: items are centered in the cross-axis
• baseline: items are aligned such as their baselines align

Tips and Tricks (write these in your notes!)

When you are about to use flexbox, ask yourself the following questions:

• What elements do I want to move?
• What is the parent element of those elements? (this is where the flex properties should live!)

If flex isn’t working the way you think it should, check the following things:

• Did I remember to include display: flex;?
  Without that line of code, the other flex properties won’t work!
• Am I sure I’m adding the flex properties to the correct element?
  Check the parent-child relationship in the HTML file to be sure that you are adding those properties to the direct parent.
  You might have to create/add a direct parent in the HTML if there isn’t already one - a great use case for <div>
• Is the parent element big enough?
  Add a border to the parent element. If it is the same width and/or height as the children, you won’t be able to move those children as expected.

CSS tends to require a lot of trial and error when you’re first learning it. Often, the CSS flow for newbies is something like:

• Developer edits their css file and reloads their webpage to see if it’s what they want.
• Developer realizes it’s not quite right, so they edit their CSS file again, reload again, on and on and on.

We encourage you to make your CSS changes in your dev tools which will instantly show you the result. You can keep editing the CSS right in your dev tools until it’s right, then copy those rules over to your text editor and save yourself all the time on the back and forth.

Using Flexbox on Nested Elements

Recreating a Comp

We will now continue working on the comp from the CSS Fundamentals lesson. You will have one hour to work on iteration 2 of this activity.

Additional Resources

• Flex Cheatsheet
• MDN Documentation
• freeCodeCamp Blog Post
• Scrimba Video that accompanies blog post above
• Flexbox Froggy Game - great practice!
• Flexbox Defense Game - more practice!
• Flexbox Zombies Game - leveled up practice!
• CSS Diner Game - learn more complex CSS selecting