
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
, andjustify-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
, andalign-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 setflex-basis
toauto
and then usewidth
to set the percentage on larger screens, but this requires more media queries than starting with pixels and turning bothgrow
andshrink
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’salign-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.
Leave a Reply