CSS Flexbox

What it is

Flexbox is a new CSS property introduced as part of CSS3 that addresses many of the problems and hacks associated with traditional float and table-based layouts. It is a powerful and flexible framework that allows you to achieve just about any layout you’d want easily. Specifically, it makes layouts with that include elements with flexible sizes, as commonly used in responsive design, easier to implement.

Why it matters

Hopefully, last lesson helped you understand the shortcomings of the common layout methods prior to flexbox. Flexbox makes laying out pages much easier, and it is the modern standard used for all CSS layout (For the moment, anyway. CSS Grid is coming).

What you'll learn

You’ll learn the syntax of flexbox and how to use it to implement some common layout patterns.

How to learn it

We put off learning flexbox until now because it is important to understand what came before in order to understand the problems it is addressing.

Flexbox can get complicated, but remember: just as I advised when we were learning CSS in the first place, you shouldn't get preoccupied memorizing syntax. Instead, focus on using flexbox to solve actual problems you’d face when making a real site. If you run into specific problems where more recondite parts of flexbox become necessary, you’ll find them by googling it as they come up.

It’s time to do the Interneting is Hard flexbox tutorial that we skipped earlier.

If you’ve finished it and want to dive into more detail, this FreeCodeCamp blog post covers flexbox in greater detail.

If you’ve done those and it still isn’t clicking, this youtube video shows how to use flexbox to create a real layout.

Comprehension

• What is CSS3?
• What is Flexbox?
• Why is flexbox superior to float-based layouts?
• If flexbox is ready, why learn float-based layout at all?
• When laying out a page, when should you use flexbox and when should you use floats?
• What is the difference between a flex container and a flex item?
• Why do you need to explicitly define flex containers?
• What CSS property do you add to a flex container to right align its flex items?
• What CSS property do you add to a flex container to tell it to space out it’s children evenly (Like justified text spaces words)?
• What is the easiest way in CSS to make three columns with different amounts of content be the same (non fixed) height?
• How can we use flexbox to make a grid of photos with a maximum of three per row?
• What is flexbox flex-direction?
• How does flex-direction change the behavior of justify-content and align-items?
• How can you use CSS to have an unordered list render in the reverse order?
• What does it mean to keep content separate from presentation in HTML & CSS? Why is it important?
• What CSS property can be used to reorder individual HTML elements?
• How can I make individual flex items have different vertical alignments, like a vertically centered logo next to bottom-aligned social icons?
• How can I use flexbox to make my flexible main content div be twice as wide as the sidebar?
• How can can I use flexbox to achieve the ‘holy grail’ layout, a flexible content window with fixed width sidebars on either side?
• What does margin: auto; do to items in a flex container?

Tasks

Remember the holy grail layout from last lesson? Now that we know flexbox, this should be easy to implement. Give it a try (hint: amazingly, it is a single line of code!)

Can you use flex to make both sidebars sit on the left side, with the main content on the right?

Finally, to get more practice with your new flexbox skills, work through Flexbox Froggy.

This site relies on your feedback! These lessons are free. Please take this 2 minute survey when you finish each lesson so I can make them better.