• Skip to primary navigation
  • Skip to footer navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

WP Fangirl

WordPress Consultant Sallie Goetsch

  • speakerdeck icon
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact

WordCamp Sacramento 2016 Slides and Code Falling in Love with Flexbox

October 23, 2016 by Sallie Goetsch Leave a Comment

This entry is part 8 of 17 in the series WordCamps
Sallie Goetsch presenting on Flexbox at WordCamp Sacramento 2016

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.

WordCamps Series Navigation<< Previous PostNext Post >>

Related Items

  • Title slide from "Not Everyone Is a WordPress Expert" presentation
    Watch My WordCamp Sacramento 2015 Presentation on Video
  • WP Fangirl Sallie Goetsch speaking at WordCamp Los Angeles 2016
    Video from My WordCamp Los Angeles 2016 Presentation
  • screwdriver heads for power screwdriver
    My Slides from #WCLAX 2016

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on Email

Filed Under: WordPress Events Tagged With: WordCamps, Flexbox, #wcsac

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

What I Write About

  • Book Reviews
  • Content Strategy
  • Design
  • Hosting and Servers
  • Most Valuable Plugins
  • There's a Plugin for That
  • Using WordPress
  • Widgets
  • WordPress Consulting
  • WordPress Events

Series

  • Interviews (5)
  • Checking Up on Your Website (4)
  • Client from Hell (5)
  • WordCamps (17)
  • WP-Tonic Roundtable (30)
  • Modern Tribe Tutorials (13)


More in this series:

  • I’m Speaking at WordCamp Sacramento-2015
  • I went to WordCamp Sacramento 2015 and all I got was this awesome sweatshirt
  • WordCamp Sacramento 2015 Slides and Notes
  • Watch My WordCamp Sacramento 2015 Presentation on Video
  • I’m speaking at WordCamp Los Angeles 2016
  • My Slides from #WCLAX 2016
  • My WordCamp Sacramento 2016 Speaker Interview
  • WordCamp Sacramento 2016 Slides and Code
  • Video from My WordCamp Los Angeles 2016 Presentation
  • WCLAX 2016 Video
  • Speaking at WCSAC 2017
  • WCSAC 2017 Notes & Slides
  • Final Set of WordCamp Sacramento Tickets Goes on Sale Wednesday!
  • Online Pressroom Video
  • Highlights of WordCamp Sacramento 2017
  • I’m Speaking at WordCamp Sacramento 2018 in September
  • Building a Compelling Portfolio with Gutenberg Slides

RSS Latest News from the East Bay WordPress Meetup

  • Does It Work? Using The New CSS Layout with Rachel Andrew
    Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.Description Over the past two years, […] The post Does It Work? Using The New CSS Layout with Rachel Andrew appeared first on East Bay WordPress Meetup.
  • Speaker Training
    Get the workbook and slides for the October 2019 speaker training, plus background and pro tips. The post Speaker Training appeared first on East Bay WordPress Meetup.
  • SEO Audit Template & Resources
    Our November speaker, John Locke, graciously provided a template for an SEO audit report. You can download it as a Microsoft Word or PDF document. The post SEO Audit Template & Resources appeared first on East Bay WordPress Meetup.

Footer

Contact Info

2063 Main St #133 · Oakley, CA 94561

+1 (510) 969-9947

author-izer

sallie [at] wpfangirl [dot] com

Location

Map of East Contra Costa County

I live in Oakley, CA and run a WordPress Meetup in Oakland, CA. Don't confuse them!

Subscribe for New Posts

  • Since I blog on an unpredictable schedule, you might want to subscribe by email. I'll also send out occasional announcements about events.

  • Privacy Policy: I will never sell or rent your contact information.

  • This field is for validation purposes and should be left unchanged.
  • Contact
  • Colophon
  • Comment Policy
  • Privacy Policy
  • Five for the Future

Copyright © 2023 · Utility Pro on Genesis Framework · WordPress · Log in

MENU
  • Home
  • About
  • Why WordPress?
  • How I Work
  • Portfolio
  • Services
  • Blog
  • Contact