intro to flexbox - a magical css property

Intro to FlexboxA Magical CSS Property

About Me

• Freelance web developer

• WordPress Orlando organizer

• WordCamp Orlando speaker coordinator

@adamsoucie adamsoucie.com

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

• 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

.container{display: flex;}

.item{flex: 1;}

• 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

• 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

• 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

• 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

• 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

• Not prevalent in themes today

• We need to start using it

• Custom themes

• Content blocks

What about WordPress?

@adamsoucieadamsoucie.comIntro to Flexbox

• Headers

• Main content layouts

• No need to hide sidebars

• Photo galleries

• Product category pages

Ideal Implentations

adamsoucie.com@adamsoucie

Any Questions?

@adamsoucieadamsoucie.com

Special ThanksTina Fiume - Illustrations

Sourceshttps://css-tricks.com/snippets/

css/a-guide-to-flexbox/

More Infoadamsoucie.com