Kim Grinfeder
http://www.servergrove.com http://interactive.miami.edu
@kimgrinfeder
Flex Layouts
Tuesday, April 22, 14
CSS
IS
AWESOME
Tuesday, April 22, 14
Flexbox
A CSS box model optimized for user interface
design
Tuesday, April 22, 14
WARNING:This specification has gone through multiple
revisions. Check the expiration date on tutorials.
Tuesday, April 22, ...
Can I use it?
Tuesday, April 22, 14
display: block;
Layout options
Tuesday, April 22, 14
display: inline;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut suscipit
erat sodales venenatis consequat. Nu...
Layout options
display: inline-block;
Tuesday, April 22, 14
floats
clears
clearfix
box-sizing
...
Tuesday, April 22, 14
Layout options
display: flex;
Tuesday, April 22, 14
Flex Container
flex item
flex container
flex item
flex item
display: flex;
Tuesday, April 22, 14
<div class=”flex”>
...
</div>
<style>
display: flex;
</style>
Tuesday, April 22, 14
Flex Container
flex item
flex container
flex item
flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex container cross axis
main axis
display: flex;
Tuesday, April 22, 14
Children of a flex
container can be laid out in any direction
Tuesday, April 22, 14
Flex Container
flex item
flex item
flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item
flex item
flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14
Flex Container
flex item flex item flex item
display: flex;
Tuesday, April 22, 14
Main Axis
justify-content: flex-start
Tuesday, April 22, 14
Main Axis
justify-content: flex-end
Tuesday, April 22, 14
Main Axis
justify-content: center
Tuesday, April 22, 14
Main Axis
justify-content: space-between
Tuesday, April 22, 14
Main Axis
justify-content: space-around
Tuesday, April 22, 14
Cross Axis
align-items: flex-start
Tuesday, April 22, 14
Cross Axis
align-items: flex-end
Tuesday, April 22, 14
Cross Axis
align-items: center
Tuesday, April 22, 14
Cross Axis
align-items: stretch
Tuesday, April 22, 14
Cross Axis
align-items: baseline
I Love Miami
Tuesday, April 22, 14
flex-direction: row;
1 2 3
Tuesday, April 22, 14
flex-direction: row-reverse;
3 2 1
Tuesday, April 22, 14
flex-direction: row;
cross-axis
main-axis
Tuesday, April 22, 14
flex-direction: column;
Tuesday, April 22, 14
flex-direction: column;
Tuesday, April 22, 14
cross-axis
flex-direction: column;
main-axis
Tuesday, April 22, 14
cross-axis
main-axis
flex-direction: column;
1
2
3
Tuesday, April 22, 14
cross-axis
main-axis
flex-direction: column-reverse;
1
2
3
Tuesday, April 22, 14
Flex Container
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
Tuesday, April 22, 14
flex-wrap
flex-wrap: nowrap
Tuesday, April 22, 14
flex-wrap
flex-wrap: wrap
1 2 3 4 5 6 7
8 9 10 11 12 13 14
Tuesday, April 22, 14
flex-wrap
flex-wrap: wrap-reverse
8 9 10 11 12 13 17
1 2 3 4 5 6 7
Tuesday, April 22, 14
flex-wrap
flex-wrap: nowrap
Tuesday, April 22, 14
flex-flow
flex-wrap + flex-direction
flex-flow: row wrap;
Tuesday, April 22, 14
Flex-items
Tuesday, April 22, 14
flex-grow
Determines how much the flex item will grow relative to
the rest of the flex items in the flex container when
positi...
flex-shrink
Determines how much the flex item will shrink relative to
the rest of the flex items in the flex container when
ne...
flex-basis
The initial main size of a flex item,
before free space is distributed according to the flex factors
The default v...
flex-basis
Tuesday, April 22, 14
flex
flex: 1 1 200px;
=
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
Tuesday, April 22, 14
order
Controls the order in which flex items appear
within their flex container
Tuesday, April 22, 14
align-self
Overrides the default alignment (align-items)
for individual flex-items.
Tuesday, April 22, 14
Responsive?
Tuesday, April 22, 14
Thank you
kimgrinfeder@gmail.com
@kimgrinfeder
Tuesday, April 22, 14
Upcoming SlideShare
Loading in …5
×

Flexbox presentation front end developers meetup miami

716 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
716
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Flexbox presentation front end developers meetup miami

  1. 1. Kim Grinfeder http://www.servergrove.com http://interactive.miami.edu @kimgrinfeder Flex Layouts Tuesday, April 22, 14
  2. 2. CSS IS AWESOME Tuesday, April 22, 14
  3. 3. Flexbox A CSS box model optimized for user interface design Tuesday, April 22, 14
  4. 4. WARNING:This specification has gone through multiple revisions. Check the expiration date on tutorials. Tuesday, April 22, 14
  5. 5. Can I use it? Tuesday, April 22, 14
  6. 6. display: block; Layout options Tuesday, April 22, 14
  7. 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. 8. Layout options display: inline-block; Tuesday, April 22, 14
  9. 9. floats clears clearfix box-sizing ... Tuesday, April 22, 14
  10. 10. Layout options display: flex; Tuesday, April 22, 14
  11. 11. Flex Container flex item flex container flex item flex item display: flex; Tuesday, April 22, 14
  12. 12. <div class=”flex”> ... </div> <style> display: flex; </style> Tuesday, April 22, 14
  13. 13. Flex Container flex item flex container flex item flex item display: flex; Tuesday, April 22, 14
  14. 14. Flex Container flex container cross axis main axis display: flex; Tuesday, April 22, 14
  15. 15. Children of a flex container can be laid out in any direction Tuesday, April 22, 14
  16. 16. Flex Container flex item flex item flex item display: flex; Tuesday, April 22, 14
  17. 17. Flex Container flex item flex item flex item display: flex; Tuesday, April 22, 14
  18. 18. Flex Container flex item flex item flex item display: flex; Tuesday, April 22, 14
  19. 19. Flex Container flex item flex item flex item display: flex; Tuesday, April 22, 14
  20. 20. Flex Container flex item flex item flex item display: flex; Tuesday, April 22, 14
  21. 21. Main Axis justify-content: flex-start Tuesday, April 22, 14
  22. 22. Main Axis justify-content: flex-end Tuesday, April 22, 14
  23. 23. Main Axis justify-content: center Tuesday, April 22, 14
  24. 24. Main Axis justify-content: space-between Tuesday, April 22, 14
  25. 25. Main Axis justify-content: space-around Tuesday, April 22, 14
  26. 26. Cross Axis align-items: flex-start Tuesday, April 22, 14
  27. 27. Cross Axis align-items: flex-end Tuesday, April 22, 14
  28. 28. Cross Axis align-items: center Tuesday, April 22, 14
  29. 29. Cross Axis align-items: stretch Tuesday, April 22, 14
  30. 30. Cross Axis align-items: baseline I Love Miami Tuesday, April 22, 14
  31. 31. flex-direction: row; 1 2 3 Tuesday, April 22, 14
  32. 32. flex-direction: row-reverse; 3 2 1 Tuesday, April 22, 14
  33. 33. flex-direction: row; cross-axis main-axis Tuesday, April 22, 14
  34. 34. flex-direction: column; Tuesday, April 22, 14
  35. 35. flex-direction: column; Tuesday, April 22, 14
  36. 36. cross-axis flex-direction: column; main-axis Tuesday, April 22, 14
  37. 37. cross-axis main-axis flex-direction: column; 1 2 3 Tuesday, April 22, 14
  38. 38. cross-axis main-axis flex-direction: column-reverse; 1 2 3 Tuesday, April 22, 14
  39. 39. Flex Container display: flex; flex-direction: row; justify-content: flex-start; align-items: center; Tuesday, April 22, 14
  40. 40. flex-wrap flex-wrap: nowrap Tuesday, April 22, 14
  41. 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. 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. 43. flex-wrap flex-wrap: nowrap Tuesday, April 22, 14
  44. 44. flex-flow flex-wrap + flex-direction flex-flow: row wrap; Tuesday, April 22, 14
  45. 45. Flex-items Tuesday, April 22, 14
  46. 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. 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. 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. 49. flex-basis Tuesday, April 22, 14
  50. 50. flex flex: 1 1 200px; = flex-grow: 1; flex-shrink: 1; flex-basis: 200px; Tuesday, April 22, 14
  51. 51. order Controls the order in which flex items appear within their flex container Tuesday, April 22, 14
  52. 52. align-self Overrides the default alignment (align-items) for individual flex-items. Tuesday, April 22, 14
  53. 53. Responsive? Tuesday, April 22, 14
  54. 54. Thank you kimgrinfeder@gmail.com @kimgrinfeder Tuesday, April 22, 14

×