intro to flexbox - a magical css property
TRANSCRIPT
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