WordCamp Sacramento 2016 Slides and Code Falling in Love with Flexbox

The very-together organizers of WordCamp Sacramento 2016 insisted that we all have our slides not only prepared but posted online before we presented. And it was a good thing, too: the one down side to our venue at Sacramento State was the absence of blinds for the windows, which meant there was too much ambient light for good slide visibility. (We’d been warned, but it was even worse than I imagined.)

Due to a severe migraine in the days immediately preceding the event, I didn’t finish the slides for my Sunday presentation until Saturday lunchtime, but they were loaded onto SpeakerDeck in plenty of time.

My slides are never self-explanatory–what would be the point of actually giving the live presentation if people could get everything they needed from the slides? But the slides provide the structure of the talk and review flex properties, with simplified illustrations based on the code samples below and real-world examples from WordPress sites.

The 40-Minute Guide to Flexbox

Here’s what I managed to cover during the presentation:

• Flexbox = Flexible Box Layout Module (CSS3). It’s not an additional framework, but part of the CSS spec.
• The Flexbox algorithm makes your browser calculate how many items can fit across your screen, how wide each one should be, and where to put them. From an observer’s perspective, it’s magic.
• You can turn three stacked boxes into three equal-height columns with 1 CSS declaration for each of two selectors.
• The selectors in question are the flex container and the flex item(s) within the container.
• A flex container needs to be set to display: flex and has the following properties: flex-direction, flex-wrap, align-content, align-items, and justify-content.
• Your flex-direction determines whether justify and align refer to the horizontal or vertical axis.
• A flex item is an “in-flow” (not absolutely positioned) child of a flex-container. Flex items have the properties flex-grow, flex-shrink, flex-basis, order, and align-self. Some browsers require the flex (shorthand for flex-grow, flex-shrink, and flex-basis) property to be set, even when using the default values, so it’s good to be in the habit of using it.
• You want to set your flex-basis in pixels (rather than percent) if you want your flex items to wrap on smaller screens. One way around this is to set flex-basis to auto and then use width to set the percentage on larger screens, but this requires more media queries than starting with pixels and turning both grow and shrink on.
• Flex order operates independently of HTML source order when set to any value but the default 0.
• Align-self allows you to align an item independently of the flex container’s align-items value.
• Cool things you can do easily with Flexbox include vertical centering, equal-height columns, placing items at the outer edge of their container, reducing media queries with automatic wrapping, checkerboard layouts, and lining “read more” buttons up even when post excerpts are not the same length.

Sample Code for Applied Flexbox

https://gist.github.com/wpfangirl/3854fd0f7010761dc66ee6db10c997e4

Flexbox Resources

• A Complete Guide to Flexbox (CSS Tricks)
• Flexbox Froggy
• The Ultimate Flexbox Cheatsheet
• Zoe M. Gillenwater’s chapter in Real-Life Responsive Web  Design (Smashing Book 5)

Photo credit for featured image: Peter Rashkin, from the attendee photo collection on the WordCamp Sacramento website.