CSS Flexbox Layout

Intro

Before Flexbox, doing complicated CSS layouts could be tricky. Now, things like vertical centering and even alignment is simple and straightforward. Flexbox is so useful and ubiquitous, it’s even used as the layout engine for mobile app frameworks like React Native! Learning Flexbox will save you a lot of time and pain.

Suggested Learning

• Learn Layout Flexbox
• Flexbox Froggy

Requirements

• Fork and complete the following CodePen assignments:
  • Flexbox Assignment 1
    • Using only Flexbox, change the CSS of the Codepen to look like this reference image:

• Flexbox Assignment 2
  • Using only Flexbox, change the CSS of the Codepen to look like this reference image: Note: The picture might be different for you. All that matters is the layout.

• Show your work the #requirements Discord channel to show you have passed this requirement off.

Extra Learning

• Flexbox Cheatsheet
• Flexbox Zombies
• Free Flexbox Video Course