1. Kim Grinfeder
http://www.servergrove.com http://interactive.miami.edu
@kimgrinfeder
Flex Layouts
Tuesday, April 22, 14

2. CSS
IS
AWESOME
Tuesday, April 22, 14

3. Flexbox
A CSS box model optimized for user interface
design
Tuesday, April 22, 14

4. WARNING:This specification has gone through multiple
revisions. Check the expiration date on tutorials.
Tuesday, April 22, 14

5. Can I use it?
Tuesday, April 22, 14

6. display: block;
Layout options
Tuesday, April 22, 14

7. display: inline;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit
erat sodales venenatis consequat. Nunc vel eleifend ipsum, in
tempor metus. Suspendisse quis mi sed lacus dictum dignissim a
eget mi. Vestibulum quis quam placerat, lobortis risus laoreet,
fringilla erat. Sed volutpat tristique cursus. Integer dapibus felis
augue, ut rutrum lectus iaculis sed. Mauris lobortis egestas ipsum, at
sodales nibh. Nunc mi felis, blandit at tempus quis, commodo a
purus. Duis dictum, tortor vitae commodo posuere, sapien dui
scelerisque nunc, nec accumsan lorem elit eu magna. Nullam in
condimentum nunc.
Layout options
Tuesday, April 22, 14

8. Layout options
display: inline-block;
Tuesday, April 22, 14

9. floats
clears
clearfix
box-sizing
...
Tuesday, April 22, 14

10. Layout options
display: flex;
Tuesday, April 22, 14

11. Flex Container
flex item
flex container
flex item
flex item
display: flex;
Tuesday, April 22, 14

12. <div class=”flex”>
...
</div>
<style>
display: flex;
</style>
Tuesday, April 22, 14

13. Flex Container
flex item
flex container
flex item
flex item
display: flex;
Tuesday, April 22, 14

14. Flex Container
flex container cross axis
main axis
display: flex;
Tuesday, April 22, 14

15. Children of a flex
container can be laid out in any direction
Tuesday, April 22, 14

16. Flex Container
flex item
flex item
flex item
display: flex;
Tuesday, April 22, 14

17. Flex Container
flex item
flex item
flex item
display: flex;
Tuesday, April 22, 14

18. Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14

19. Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14

20. Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14

21. Main Axis
justify-content: flex-start
Tuesday, April 22, 14

22. Main Axis
justify-content: flex-end
Tuesday, April 22, 14

23. Main Axis
justify-content: center
Tuesday, April 22, 14

24. Main Axis
justify-content: space-between
Tuesday, April 22, 14

25. Main Axis
justify-content: space-around
Tuesday, April 22, 14

26. Cross Axis
align-items: flex-start
Tuesday, April 22, 14

27. Cross Axis
align-items: flex-end
Tuesday, April 22, 14

28. Cross Axis
align-items: center
Tuesday, April 22, 14

29. Cross Axis
align-items: stretch
Tuesday, April 22, 14

30. Cross Axis
align-items: baseline
I Love Miami
Tuesday, April 22, 14

31. flex-direction: row;
1 2 3
Tuesday, April 22, 14

32. flex-direction: row-reverse;
3 2 1
Tuesday, April 22, 14

33. flex-direction: row;
cross-axis
main-axis
Tuesday, April 22, 14

34. flex-direction: column;
Tuesday, April 22, 14

35. flex-direction: column;
Tuesday, April 22, 14

36. cross-axis
flex-direction: column;
main-axis
Tuesday, April 22, 14

37. cross-axis
main-axis
flex-direction: column;
1
2
3
Tuesday, April 22, 14

38. cross-axis
main-axis
flex-direction: column-reverse;
1
2
3
Tuesday, April 22, 14

39. Flex Container
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
Tuesday, April 22, 14

40. flex-wrap
flex-wrap: nowrap
Tuesday, April 22, 14

41. flex-wrap
flex-wrap: wrap
1 2 3 4 5 6 7
8 9 10 11 12 13 14
Tuesday, April 22, 14

42. flex-wrap
flex-wrap: wrap-reverse
8 9 10 11 12 13 17
1 2 3 4 5 6 7
Tuesday, April 22, 14

43. flex-wrap
flex-wrap: nowrap
Tuesday, April 22, 14

44. flex-flow
flex-wrap + flex-direction
flex-flow: row wrap;
Tuesday, April 22, 14

45. Flex-items
Tuesday, April 22, 14

46. flex-grow
Determines how much the flex item will grow relative to
the rest of the flex items in the flex container when
positive free space is distributed
Tuesday, April 22, 14

47. flex-shrink
Determines how much the flex item will shrink relative to
the rest of the flex items in the flex container when
negative free space is distributed
Tuesday, April 22, 14

48. flex-basis
The initial main size of a flex item,
before free space is distributed according to the flex factors
The default value is auto,
also accepts % or absolute length
Tuesday, April 22, 14

49. flex-basis
Tuesday, April 22, 14

50. flex
flex: 1 1 200px;
=
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
Tuesday, April 22, 14

51. order
Controls the order in which flex items appear
within their flex container
Tuesday, April 22, 14

52. align-self
Overrides the default alignment (align-items)
for individual flex-items.
Tuesday, April 22, 14

53. Responsive?
Tuesday, April 22, 14

54. Thank you
kimgrinfeder@gmail.com
@kimgrinfeder
Tuesday, April 22, 14