Week 5: Flexbox

Agenda

• Zoom Tutorial
  • Introduction to Flex Box
  • Basic Mechanics
• In-Class
  • Practical applications of Flexbox
  • In-Class activity time

In-Class Tutorial

Flexbox Tutorial

Together we will explore flexbox, how it works and practical examples.

Deliverables

In-Class 5

Basic Footer

This follow along tutorial will be a practical application of flexbox to create a footer.

Due: Fri Oct 6, 2023

Assignment 5

Navbar

Build a basic responsive navbar.

Due: Mon Oct 9, 2023

CSS Flexbox

In recent years another method for creating layout was added to CSS: Flexbox. It starts with using display: flex and then you define two parts the container and the items inside the container.

• Used for aligning multiple elements along ONE axis
• There are two main parts: flexbox containers and flexbox items
• Getting Started with Flexbox video (opens new window)

TIP

Whenever you are adding display:flex to an element you are really just talking about how to position the children elements of that element.

Flexbox Container Properties

• display: flex
• flex-direction property can be row, row-reverse, column, column-reverse
• justify-content property (along main axis) can be flex-start, flex-end, center, space-around, space-between and space-evenly
• align-items (on cross-axis) can be flex-start, flex-end, center, stretch, baseline
• flex-wrap can be wrap, no-wrap, wrap-reverse

Flexbox Item Properties

• flex-basis initial size for an item
• flex-grow controls the ratio for how items grow relative to each other
• flex-shrink controls the ratio of how items shrink relative to each other
• flex is a shorthand for flex-basis, flex-grow and flex-shrink
• align-self to override container's align-items value for one item
• order assign exact position of each item.

.container {
  /* this is the flexbox container */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}
.container .item {
  /* these are the flexbox items */
  flex-basis: auto;
  flex-grow: 0;
  /* these two will keep original content sizes */
  flex-basis: 0;
  flex-grow: 1;
  /* these two will start the items at width 0 and then expand them equally */
  flex-shrink: 1;
  /* shrink them equally as the width of the container is reduced */
}

• Here is an excellent free online course for Flexbox.io (opens new window)
• Visual Guide to Flexbox Properties (opens new window)

More Resources

• Flexbox containers (opens new window)
• Flexbox Sizing (opens new window)
• Flexbox Alignment (opens new window)
• Interactive Flexbox Tutorial (opens new window)
• Interactive Flexbox Game (opens new window)
• CSS-Tricks Flexbox Guide (opens new window)
• MDN Flexbox (opens new window)

To Do Before Week 6

Self-Directed To Do

Watch the following videos before week 7: