Housekeeping

1. Tooltime
   • Gists
     • Tony’s Gists
   • Firefox Flexbox Inspector

Homework

1. Review
   • Images in HTML
2. Floats
   • Read: Floats
3. Flexbox
   • Read: Complete Guide to Flexbox
   • Reference: flex property
   • Watch: Flexbox Containers by Kevin Powell. This is Part 1 of 3
   • Watch: Flexbox items by Kevin Powell. This is Part 2 of 3 (Part 3 is not assigned for homework but feel free to watch).
   • Watch: Flexbox design patterns you can use in your projects by Kevin Powell. This one of Kevin’s latest video on Flexbox.
   • Watch: Flexbox vs. CSS Grid — Which is Better? by Jenn Simmons

Terms

Flex container

An element with display: flex which creates a “flex context” for its items.

Flex item

All direct children of the Flex container. Often selected with a child selector such as .container > *.

1. Flexbox: Containers and items

Flexbox and CSS Grid both rely on the container/item HTML structure. With navigation, a ul usually serves as the container with its li children serving as the items.

<ul class="container">
  <!-- Items: all direct children of the container -->
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Additionally, the primary navigation of a page should be wrapped in a nav element. Here are the horizontal nav examples that are broken out in today’s gists:

See the Pen Flexbox Navigation Examples by Tony Grimes (@browsertherapy) on CodePen.

2. Horizontal Navigation: To grow or not to grow

Yesterday, we styled a vertical navigation menu:

• Gist: Resetting default list styles
• Gist: Vertical nav menu

Today we’ll build on this menu by making it a horizontal flexbox. We’ll cover two common patterns:

• Horizontal menu - items shrink wrap the links
• Horizontal menu - items grow to fill extra space

3. Simple banners with Flexbox

Flexbox doesn’t care what elements are Flex items; if it’s a direct child of a Flex container, it becomes a Flex item. We can use this for page banners too:

See the Pen Header: Banners with logo, site title and subtitle by Tony Grimes (@browsertherapy) on CodePen.

In the following two examples, Flexbox uses header as a Flex container to control banner layouts.

• Gist: Horizontal banner with logo and site title
  • This container has two Flex items: an img (logo) and h1 (site title)
• Gist: Header: Horizontal banner with logo, site title and sub-title
  • This example is similar to the first, except a site title and sub-title are wrapped in a div. This “protects” the headings from becoming Flex items (the div becomes the Flex item) so they will act as regular block elements.

4. Pro-tip: Use HSL to ensure readable links

The above examples use CSS colour names to define base, hover and active states. HSL allows you to choose your colours based on Hue, Saturation and Lightness.

nav a {
  color: hsl(270deg, 100%, 50%);
  background: hsl(270deg, 100%, 100%);
}

nav a:hover {
  background: hsl(60deg, 10%, 50%);
}

nav a:active {
  background: hsl(270deg, 100%, 50%);
  color: hsl(270deg, 100%, 100%);
}

Activities

1. Flexbox practice

Read and complete the following MDN Test your skills activity.

• Flexbox layouts
  • Today’s lessons covered Flex Layout One. We’ll cover the other layouts throughout Week 3.

2. Make your own horizontal nav menu

Try to duplicate a horizontal navigation menu and banner using the above sample code.

Search for an example of a horizontal navigation menu online that you think you can duplicate.

• Which of the “horizontal menu” examples above best fit your selected menu? Are other Flexbox properties required to achieve the desired effect?
• How much padding needs to be added to the a element?
• What colours are used? How do you find this information? What elements are the colours applied to?
• What other design elements are needed? What CSS properties are needed to create them?

Clean-up time!

• Submit today’s Codepen/repo/gist to the Dailies section (in Assessments) in Brightspace.