This document introduces flexbox, a CSS property for laying out items in rows or columns. It discusses what flexbox is, the container and item properties that control flexbox layout, browser support for flexbox, and examples of how flexbox could be used in WordPress themes. The presenter is a freelance web developer and WordPress organizer who gives talks on flexbox and WordPress.

1. Intro to Flexbox
A Magical CSS Property

2. About Me
• Freelance web developer
• WordPress Orlando organizer
• WordCamp Orlando speaker
coordinator
@adamsoucie adamsoucie.com

3. Today We’ll Learn
1. What is Flexbox?
2. What are the Flexbox
properties?
3. What browsers support
Flexbox?
4. How does this apply to
WordPress?
@adamsoucie adamsoucie.com

4. • Magic.
• Set of CSS properties
• Alternative to floats
• A “new” way of looking at
responsive layouts
• Makes “mobile first” layouts a
breeze
What is Flexbox?
@adamsoucieadamsoucie.com

5. .container
{
display: flex;
}
.item
{
flex: 1;
}

6. • Based on the container and first
level children
• Items resized on the fly - both
horizontally AND vertically.
• Uses 2 axis
How does it work?
• The axis can be swapped
• Items can automatically wrap
(but not by default)
• Items can be aligned like text,
but with more options
@adamsoucie adamsoucie.com *Diagram from CSS Tricks

7. • display: flex
• flex-direction: row | row-reverse |
column | column-reverse
• flex-wrap: nowrap | wrap | wrap-
reverse
• flex-flow: (direction) (wrap)
Container Properties
adamsoucie.com @adamsoucieIntro to Flexbox

8. • Horizontal alignment
• justify-content: flex-start | flex-end |
center | space-between | space-around
• Vertical alignment
• align-content: flex-start | flex-end | center
| stretch | space-between | space-around
• align-items: flex-start | flex-end | center |
stretch | baseline
• Only apply when multiple lines of flex items
Container Properties
adamsoucie.com @adamsoucieIntro to Flexbox

9. • flex-grow: (number) [0 is default]
• flex-shrink: (number) [1 is default]
• flex-basis: (length) [auto is default]
• flex: [grow] [shrink] [basis]
• Highly recommended
• Sets values automatically
• align-self: auto | flex-start | flex-end |
center | stretch | baseline
Item Properties
Intro to Flexbox adamsoucie.com @adamsoucie

10. • Modern browsers only
• Safari requires -webkit-
prefix
Browser Support
• Becoming the standard
• Currently in Last Call
Working Draft status with
W3C
@adamsoucie adamsoucie.com *Diagram from CanIUse

11. • Not prevalent in themes
today
• We need to start using it
• Custom themes
• Content blocks
What about WordPress?
@adamsoucieadamsoucie.comIntro to Flexbox

12. • Headers
• Main content layouts
• No need to hide sidebars
• Photo galleries
• Product category pages
Ideal Implentations
adamsoucie.com@adamsoucie

13. Any Questions?
@adamsoucieadamsoucie.com

14. Special Thanks
Tina Fiume - Illustrations
Sources
https://css-tricks.com/snippets/css/a-
guide-to-flexbox/
More Info
adamsoucie.com