Intro to Flexbox





Click here to access recording





Learning Objectives

Students Will Be Able To:

  • Describe the Use Case of Flexbox
  • Use Flexbox for One-Dimensional Layout



Roadmap

  • Setup
  • Intro to Flexbox & CSS Grid
  • Why use Flexbox?
  • Flexbox Fundamentals
  • Your First Flexbox


Setup

  • For this lesson, we'll be using a HTML, CSS, JS repl.it
  • Name the Repl something like Flexbox & CSS Grid

  • Finally, add a bit of starting CSS inside of style.css:

    * {
  /* height & width now includes border & padding */
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Helvetica;
}



Intro to Flexbox & CSS Grid

  • As a front-end developer, you will be required to precisely layout the elements on web pages.
  • Prior to Flexbox & CSS Grid, laying out the parts of a web page from basic navigation headers to complex full-page layouts has not been as straightforward as it could be - Flexbox & Grid, however, are game changers.
  • The capabilities of Flexbox & CSS Grid complement each other and using both side-by-side and even nesting one within the other is possible.
  • The difference between Flexbox and CSS Grid is how they are designed to lay out their children:



Flexbox


Why Use Flexbox?

  • Flexbox excels at assisting devs with the following tasks:

    • Vertically centering content & elements within a container element
    • Spacing child elements within a container uniformly
    • Making the height of child elements laid out in columns the same even though they have a different amount of content.



Flexbox Fundamentals

  • We use a CSS display: flex; declaration to make an element a flex container, for example:

    section {
  display: flex;
}

    The above would make all <section> elements flex containers and all direct children become flex items.

  • Let's open in a separate tab and briefly review what has become the de facto guide to Flexbox



Your First Flexbox

  • We're going to make a navigation bar using Flexbox.

  • Add the following markup for the nav bar inside of the <body>:

    <nav>
  <div>HOME</div>
  <div>ABOUT</div>
  <div>WIDGETS</div>
  <div>LOG OUT</div>
</nav>
  • Run the Repl to check it out - definitely not what we're looking for!
  • Use DevTools to verify that the <nav> & <div> elements are block elements that take up all available width. We're getting an inside look at how Repl.it does it's magic by using of an <iframe> element.
  • Which element do we need to make the flex container?

  • Let's make the <nav> a Flexbox:

    nav {
  display: flex;
}

  • Run again, and we can make the following observations:

    • The flex items are laid out horizontally in a row - this is the default layout of a flex container.
    • The <div> elements have become flex items and no longer behave as block elements - their width has collapsed to that of their content and they are willing to sit side-by-side other elements.

  • This just in... Our client has informed us that:

    • The navigation bar must:

      • Be 50px in height
      • Have a background color of #a2cbb6.

    • The menu items in the nav bar need:

      • A font size of 20px
      • A margin of 10px on all 4 sides
      • A text color of #f3dba8
  • Add the CSS to make the client happy!
  • A flex container has a flex-direction property that defines the direction of its main axis.

  • There are four values:

    • row - the default
    • row-reverse
    • column
    • column-reverse
  • Let's check them out by adding a flex-direction to the <nav>.
  • In addition to the concept of a main axis, a flex container has a cross axis which represents the opposite direction of its main axis.

  • For example, if the flex-direction is set to row (the default), the:

    • main axis is horizontal
    • cross axis is vertical

  • If the flex-direction is set to column, they flip:

    • main axis is vertical
    • cross axis is horizontal
  • The concepts of main axis & cross axis come into play when it comes to sizing and layout properties, such as:
  • justify-content: Controls alignment for the main axis
  • align-items: Controls alignment for the cross axis
  • Let's refer to the Guide to Flexbox we opened to see the amazing options we have and experiment a bit!

  • With the following alignment properties set:

    nav {
  display: flex;
  flex-direction: row; /* default */
  justify-content: flex-start; /* default */
  height: 50px;
  background-color: #a2cbb6;
}

    The nav bar's not looking too bad...

  • Let's say you want the LOG OUT menu item to be aligned on the right:

  • You could wrap the others with another element and set justify-content to space-between.

  • Or, we can use this bit of CSS goodness:

    nav > div:last-child {
  margin-left: auto;
}



Review Questions - Flexbox

❓ When an element has a CSS property of display: flex;, that element becomes a flex __.

❓ When an element has a CSS property of display: flex;, its direct children become flex __.

❓ What value is the default for the flex-direction property?

❓ Is it justify-content or align-items that controls the alignment along the cross axis?




Flexbox & CSS Grid Practice Sites

  • We've covered the key properties of these two fine additions to CSS, but...

  • Here are a couple of really fun ways to learn more about them:



References