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

1. An Intro to Flexbox
What the Flexbox?
Lauren Pittenger
@laurenpittenger1

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. http://codepen.io/lepittenger/pen/vyjeER/
3

4. http://codepen.io/lepittenger/full/MbGEaw/​
4

5. Flexbox Layout Mode
5

6. Flex Container
display: flex
6

7. Flex Items
7

8. Main Axis
The main axis is the axis along which the
flex items follow each other.
8

9. Cross Axis
The cross axis is the axis perpendicular to
the main axis.
9

10. Main & Cross Sizes
10

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. 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. 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. 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. Flexbox Layout Mode
15

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. http://codepen.io/lepittenger/details/pNONWY/
30

31. http://codepen.io/lepittenger/details/pNONWY/
31

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. Resources
CSS Tricks: A Complete Guide to
Flexbox
Joni Bologna Flexbox Cheatsheet
MDN Flexbox Layout
whattheflexbox.com
Flexbox Froggy
David Walsh: Flexbox Layouts
33