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.

What The Flexbox? An Intro to Flexbox

108 views

Published on

This is a talk I did about flexbox I did at the Philly 'burbs WordPress Meetup group.

Published in: Design
  • Be the first to comment

  • Be the first to like this

What The Flexbox? An Intro to Flexbox

  1. 1. An Intro to Flexbox What the Flexbox? Lauren Pittenger @laurenpittenger1
  2. 2. What is flexbox? A layout mode which positions elements on a page in a way that is predictable and flexible. Doesn't use floats and margins don't collapse. Many designers find it easier to use. 2
  3. 3. http://codepen.io/lepittenger/pen/vyjeER/ 3
  4. 4. http://codepen.io/lepittenger/full/MbGEaw/​ 4
  5. 5. Flexbox Layout Mode 5
  6. 6. Flex Container display: flex 6
  7. 7. Flex Items 7
  8. 8. Main Axis The main axis is the axis along which the flex items follow each other. 8
  9. 9. Cross Axis The cross axis is the axis perpendicular to the main axis. 9
  10. 10. Main & Cross Sizes 10
  11. 11. Flex Container Properties Flex Direction: Row Defines the main and cross axis and controls how flex items are placed in container. flex-direction: row | row-reverse | column | column-reverse 11
  12. 12. Flex Container Properties Flex Direction: Row Reverse Defines the main and cross axis and controls how flex items are placed in container. flex-direction: row | row-reverse | column | column-reverse 12
  13. 13. Flex Container Properties Flex Direction: Column Defines the main and cross axis and controls how flex items are placed in container. flex-direction: row | row-reverse | column | column-reverse 13
  14. 14. Flex Container Properties Flex Direction: Column Reverse Defines the main and cross axis and controls how flex items are placed in container. flex-direction: row | row-reverse | column | column-reverse 14
  15. 15. Flexbox Layout Mode 15
  16. 16. Flex Container Properties Justify Content: Flex Start Defines how space is distributed along the main axis. justify-content: flex-start | flex-end | center | space-between | space-around 16
  17. 17. Flex Container Properties Justify Content: Flex End Defines how space is distributed along the main axis. justify-content: flex-start | flex-end | center | space-between | space-around 17
  18. 18. Flex Container Properties Justify Content: Center Defines how space is distributed along the main axis. justify-content: flex-start | flex-end | center | space-between | space-around 18
  19. 19. Flex Container Properties Justify Content: Space Between Defines how space is distributed along the main axis. justify-content: flex-start | flex-end | center | space-between | space-around 19
  20. 20. Flex Container Properties Justify Content: Space Around Defines how space is distributed along the main axis. justify-content: flex-start | flex-end | center | space-between | space-around 20
  21. 21. Flex Container Properties Flex Wrap: Nowrap Specifies whether items on a line should be forced onto one line or flow onto a next line. flex-wrap: nowrap | wrap | wrap-reverse 21
  22. 22. Flex Container Properties Flex Wrap: Wrap Specifies whether items on a line should be forced onto one line or flow onto a next line. flex-wrap: nowrap | wrap | wrap-reverse 22
  23. 23. Flex Container Properties Flex Wrap: Wrap Reverse Specifies whether items on a line should be forced onto one line or flow onto a next line. flex-wrap: nowrap | wrap | wrap-reverse 23
  24. 24. Align Items: Flex Start Flex Container Properties Defines how space is distributed along the cross axis. align-items: flex-start | flex-end | center | baseline | stretch 24
  25. 25. Flex Container Properties Align Items: Center Defines how space is distributed along the cross axis. align-items: flex-start | flex-end | center | baseline | stretch 25
  26. 26. Flex Container Properties Align Items: Baseline Defines how space is distributed along the cross axis. align-items: flex-start | flex-end | center | baseline | stretch 26
  27. 27. Flex Container Properties Align Items: Stretch Defines how space is distributed along the cross axis. align-items: flex-start | flex-end | center | baseline | stretch 27
  28. 28. Align Content stretch space-between space-around flex-start flex-end center Aligns a flex container’s lines on the cross axis when there is extra space along the cross axis. It has no effect on a single line of flex items. align-content: flex-start | flex-end | center | space-between | space-around | stretch 28
  29. 29. Align Self Flex Item Properties Overrides align-items value. Ignored if flex item’s cross-axis margin is set to auto. align-self: auto | flex-start | flex-end | center | baseline | stretch 29
  30. 30. http://codepen.io/lepittenger/details/pNONWY/ 30
  31. 31. http://codepen.io/lepittenger/details/pNONWY/ 31
  32. 32. Order Flex item Properties Specifies order items should appear within the flex container. Laid out in ascending order. Elements with the same order appear in the order of the source code. order: <integer> 32
  33. 33. Resources CSS Tricks: A Complete Guide to Flexbox Joni Bologna Flexbox Cheatsheet MDN Flexbox Layout whattheflexbox.com Flexbox Froggy David Walsh: Flexbox Layouts 33

×