Chapter 11: Flexbox
Now that you know how much Grid can do, let's look at where Flexbox excels.
11a: Slides
These are the same slides we've been using in the course. We're starting with slide 29.
11b: Basic flexbox syntax demo
We'll explore many of Flexbox's properties so you can see how they look and what they do specifically.
See the reference guide for the properties.
11c: Navbar
A navbar is a common use for Flexbox for many reasons. Let’s look at some ways we can style navbars with Flexbox.
I’ve covered navbar layouts in most of my courses here at Frontend Masters, including how to make hamburger buttons with and without JavaScript. I'm not going to cover that in this course. Instead, we will concentrate on some navbar layouts in desktop, and then we’ll have you try a few modifications for a tablet layout.
11d: You try it: Flexbox layouts
Instructions- Place all 5 figures are on the same row with a 2% gap between each box. You should not need to change the HTML to do this.
- If the window is less than 850px, have 3 boxes on one row and 2 boxes on the second row. Maintain the 2% gap between each box in the first row. (You'll have >2% gap on the 2nd row.) Distribute any gap as evenly as you can if it's greater than 2%.
BONUS:
At smaller screen dimensions (<= 850px), have the boxes appear in the center of the page. - At >850px, align the single row of boxes at the bottom of the page using Flexbox-specific properties (i.e. not margin or positioning).
A few hints:
- Remember that you may need to do some math to get these on the same line. Width is “flex-basis” in Flexbox, and it’s a child property.
- If you work in percents as your “width”, your gap plus cards should total 100%.
- Don’t hesitate to experiment with justify-content, align-items, and align-content.