Advanced Responsive Layouts with CSS Flexbox

Learn how to use the CSS Flexible Box Layout module (aka Flexbox) to create advanced responsive layouts.

Introduction

• Welcome
• How to use the exercise files

1. What Is Flexbox?

• What is Flexbox?
• Caveats when using Flexbox today

2. Flexbox-Powered Menus

• Exploring common menu layouts
• Marking up five types of menus
• Using Flexbox to control single-level menu layout
• Using Flexbox to control advanced menus
• Using Flexbox to control multilevel menus with dropdowns
• Creating a social media menu
• Using Flexbox to control multiple menus

3. Responsive Card Layouts

• Challenges with card layouts
• Marking up typical cards
• Using Flexbox to create a grid of cards
• Adding responsive breakpoints
• Solving the common "anchor doesn't fill the card" problem

4. Holy Grail Layout

• What is the holy grail layout?
• Marking up the holy grail layout in HTML
• Styling the holy grail layout with Flexbox
• Changing the layout with Flexbox

5. Handing Control to the User

• Handing control to the user
• Sidebar position switching
• Changing from holy grail to vertical display
• Hiding and showing the sidebar
• Animating content

6. Putting It All Together

• Putting it all together

Next steps

• Thank you