Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Intro to Flexbox
A Magical CSS Property
About Me
• Freelance web developer
• WordPress Orlando organizer
• WordCamp Orlando speaker
coordinator
@adamsoucie adamso...
Today We’ll Learn
1. What is Flexbox?
2. What are the Flexbox
properties?
3. What browsers support
Flexbox?
4. How does th...
• Magic.
• Set of CSS properties
• Alternative to floats
• A “new” way of looking at
responsive layouts
• Makes “mobile fi...
.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 ...
• display: flex
• flex-direction: row | row-reverse |
column | column-reverse
• flex-wrap: nowrap | wrap | wrap-
reverse
•...
• Horizontal alignment
• justify-content: flex-start | flex-end |
center | space-between | space-around
• Vertical alignme...
• flex-grow: (number) [0 is default]
• flex-shrink: (number) [1 is default]
• flex-basis: (length) [auto is default]
• fle...
• Modern browsers only
• Safari requires -webkit-
prefix
Browser Support
• Becoming the standard
• Currently in Last Call
...
• Not prevalent in themes
today
• We need to start using it
• Custom themes
• Content blocks
What about WordPress?
@adamso...
• Headers
• Main content layouts
• No need to hide sidebars
• Photo galleries
• Product category pages
Ideal Implentations...
Any Questions?
@adamsoucieadamsoucie.com
Special Thanks
Tina Fiume - Illustrations
Sources
https://css-tricks.com/snippets/css/a-
guide-to-flexbox/
More Info
adams...
Upcoming SlideShare
Loading in …5
×

Intro to Flexbox - A Magical CSS Property

1,512 views

Published on

Flexbox is a new feature in CSS that drastically changes the way we think about layout. In short, it's magic, and it makes building responsive sites a breeze. Adam will demo flexbox and teach you how a few lines of CSS can get you started building responsive sites with this great new feature!

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Intro to Flexbox - A Magical CSS Property

  1. 1. Intro to Flexbox A Magical CSS Property
  2. 2. About Me • Freelance web developer • WordPress Orlando organizer • WordCamp Orlando speaker coordinator @adamsoucie adamsoucie.com
  3. 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. 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. 5. .container { display: flex; } .item { flex: 1; }
  6. 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. 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. 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. 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. 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. 11. • Not prevalent in themes today • We need to start using it • Custom themes • Content blocks What about WordPress? @adamsoucieadamsoucie.comIntro to Flexbox
  12. 12. • Headers • Main content layouts • No need to hide sidebars • Photo galleries • Product category pages Ideal Implentations adamsoucie.com@adamsoucie
  13. 13. Any Questions? @adamsoucieadamsoucie.com
  14. 14. Special Thanks Tina Fiume - Illustrations Sources https://css-tricks.com/snippets/css/a- guide-to-flexbox/ More Info adamsoucie.com

×