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.

The Power of CSS Flexbox

2,715 views

Published on

Web developers have been trying to solve layout issues since the dawn of web. We started with tables, then floats and grids—each technique had its limitations. Thanks to Flexbox, it’s all about to change.

Flexbox is one of the most promising yet underutilized additions to the CSS3 specification. Using this layout model you can arrange elements in any direction, align them, distribute the space, assign sizes, stretch or shrink them to fit in parent element, wrap or rearrange them—all with far less CSS compared to grids.

Flexbox truly shines when used in responsive design. Changing the visual order, alignment, assigning proportional sizes of your boxes becomes a breeze. In this presentation, learn the basics of Flexbox specification and explore some of its practical uses.

Published in: Technology

The Power of CSS Flexbox

  1. 1. The Power of CSS Flexbox Gaurav Gupta @FrshBakedPixels #edui_flexbox
  2. 2. Slides tiny.cc/flexboxslides @FrshBakedPixels #edui_flexbox
  3. 3. About me IT Analyst Division of Learning Innovation and Student Success
 
 Virginia Commonwealth University
  4. 4. @FrshBakedPixels #edui_flexbox
  5. 5. Evolution of layout methods @FrshBakedPixels #edui_flexbox
  6. 6. Table Div + Float Grid Responsive
 Web Design Flexbox
  7. 7. float:left float: right Table Div + Float Grid Responsive
 Web Design Flexbox
  8. 8. Table Div + Float Grid Responsive
 Web Design Flexbox
  9. 9. 12 columns 4 columns 6 columns 6 columns 4 columns 4 columns Table Div + Float Grid Responsive
 Web Design Flexbox
  10. 10. Media Queries 1 2 3 @media (max-width: 600px) { /*CSS for small screens*/ } Table Div + Float Grid Responsive
 Web Design Flexbox
  11. 11. 1 2 3 @media (max-width: 600px) { /*CSS for small screens*/ } Table Div + Float Grid Responsive
 Web Design Flexbox Media Queries
  12. 12. The CSS3 Flexible Box, or flexbox, is a layout mode providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen sizes and different display devices. - Mozilla Developer Network “ Table Div + Float Grid Responsive
 Web Design Flexbox
  13. 13. Basics @FrshBakedPixels #edui_flexbox
  14. 14. Demo code tiny.cc/flexboxdemo @FrshBakedPixels #edui_flexbox
  15. 15. <div class="parent"> <div class="child box1">1</div> <div class="child box2">2</div> <div class="child box3">3</div> <div class="child box4">4</div> <div class="child box5">5</div> </div>
  16. 16. 1 2 3 4 5
  17. 17. 1 2 3 4 5 .parent { display:flex }
  18. 18. 1 2 3 4 5 Main Axis CrossAxis
  19. 19. 1 2 3 4 5 Main Axis CrossAxis .parent { display: flex; flex-direction: row; /*default*/ }
  20. 20. 1 2 3 4 5 .parent { display: flex; flex-direction: column; }
  21. 21. 12345 .parent { display: flex; flex-direction: row-reverse; }
  22. 22. 1 2 3 4 5 .parent { display: flex; flex-direction: column-reverse; }
  23. 23. Wrapping items @FrshBakedPixels #edui_flexbox
  24. 24. 1 2 3 4 5
  25. 25. 1 2 3 4 5 6 7 8 9 0
  26. 26. 1 2 3 4 5 6 7 8 9 0 .parent { display: flex; flex-wrap: wrap; }
  27. 27. 1 2 3 4 5 6 7 8 9 0 .parent { display: flex; flex-wrap: wrap-reverse; }
  28. 28. 1 2 3 4 5 6 7 8 9 0 .parent { display: flex; flex-direction: column; flex-wrap: wrap; }
  29. 29. Aligning items @FrshBakedPixels #edui_flexbox
  30. 30. justify-content aligns items along 
 main axis align-content aligns rows of items 
 along cross axis align-items aligns items in a single 
 row along cross axis
  31. 31. justify-content aligns items along 
 main axis align-content aligns rows of items 
 along cross axis align-items aligns items in a single 
 row along cross axis
  32. 32. 1 2 3 4 5 .parent { display: flex; justify-content: flex-start; /*default*/ }
  33. 33. 1 2 3 4 5 .parent { display: flex; justify-content: flex-end; }
  34. 34. 1 2 3 4 5 .parent { display: flex; justify-content: center; }
  35. 35. 1 2 3 4 5 .parent { display: flex; justify-content: space-between; }
  36. 36. 1 2 3 4 5 .parent { display: flex; justify-content: space-around; }
  37. 37. justify-content aligns items along 
 main axis align-content aligns rows of items 
 along cross axis align-items aligns items in a single 
 row along cross axis
  38. 38. 1 2 3 4 5 6 7 8 9 .parent { display: flex; flex-wrap: wrap; align-content: flex-start; }
  39. 39. 1 2 3 4 5 6 7 8 9 .parent { display: flex; flex-wrap: wrap; align-content: flex-end; }
  40. 40. 1 2 3 4 5 6 7 8 9 .parent { display: flex; flex-wrap: wrap; align-content: center; }
  41. 41. 1 2 3 4 5 6 7 8 9 .parent { display: flex; flex-wrap: wrap; align-content: space-between; }
  42. 42. 1 2 3 4 5 6 7 8 9 .parent { display: flex; flex-wrap: wrap; align-content: space-around; }
  43. 43. 1 2 3 4 5 6 7 8 9 .parent { display: flex; flex-wrap: wrap; align-content: stretch; /*default*/ }
  44. 44. justify-content aligns items along 
 main axis align-content aligns rows of items 
 along cross axis align-items aligns items in a single 
 row along cross axis
  45. 45. .parent { display: flex; align-items: flex-start; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
  46. 46. .parent { display: flex; align-items: flex-end; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
  47. 47. .parent { display: flex; align-items: center; } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
  48. 48. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod Proin ex lectus, pellentesque eget Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis. .parent { display: flex; align-items: baseline; }
  49. 49. .parent { display: flex; align-items: stretch; /*default*/ } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
  50. 50. .parent { display: flex; align-items: stretch; } .box3 { align-self: flex-end; /*override individual child*/ } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet diam feugiat ullamcorper nunc vel, sodales mi. Aliquam tempor enim at arcu finibus, et consectetur mi blandit. Vestibulum semper commodo tempor. Ut venenatis euismod Proin ex lectus, pellentesque eget est sit amet, euismod maximus arcu Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras eu elementum dui. In feugiat feugiat turpis.
  51. 51. Changing item order @FrshBakedPixels #edui_flexbox
  52. 52. 1 2 3 4 5 .child { order: 0 } /*default*/
  53. 53. 1 2 345 .box3 { order: 1 } .box5 { order: -1 }
  54. 54. 1 2 345 .box3 { order: 1 } .box5 { order: -1 } order: -1 0 0 0 1
  55. 55. “Flexing” items @FrshBakedPixels #edui_flexbox
  56. 56. .child { flex: 1 1 200px; }
  57. 57. .child { flex: 1 1 200px; } flex-basis flex-grow flex-shrink flex is applied to child elements
  58. 58. flex-basis baseline width auto flex-grow proportion of extra width an item will get if extra space available 0 flex-shrink proportion of width it will give up if needed 1
  59. 59. .child {flex: 0 1 auto} /*default*/ ≫
  60. 60. .child {flex: 1 0 auto} flex-grow flex-shrink
  61. 61. .child {flex: 1 0 10%} .child {flex: 1 0 20%} .child {flex: 1 0 25%}
  62. 62. .child {flex: 1 0 25%} .child {flex: 1 1 25%}
  63. 63. .child {flex: 1 0 auto} .box1 {flex: 10 0 auto} .child {flex: 1 0 auto} .box1 {flex: 10 0 auto} .box2 {flex: 10 0 auto} ≫
  64. 64. Real world examples @FrshBakedPixels #edui_flexbox
  65. 65. Example 1: Vertical align @FrshBakedPixels #edui_flexbox
  66. 66. Look Ma, I'm 
 vertically aligned!
  67. 67. Look Ma, I'm 
 vertically aligned! .parent { display: flex; align-items: center; justify-content: center; }
  68. 68. Look Ma, I'm 
 vertically aligned! So am I! .parent { display: flex; align-items: center; justify-content: center; }
  69. 69. Look Ma, I'm 
 vertically aligned! So am I! .parent { display: flex; align-items: center; justify-content: center; flex-direction: column; }
  70. 70. Example 2: Equal height columns @FrshBakedPixels #edui_flexbox
  71. 71. Columns with grid layout
  72. 72. Columns with flexbox ≫
  73. 73. .row { display: flex; flex-wrap: wrap; } .card-link { flex: 1 0 250px; display: flex; flex-direction: column; } .button { margin-top: auto; }
  74. 74. Example 3: Grid vs. Flexbox @FrshBakedPixels #edui_flexbox
  75. 75. col-4 col-4 col-4
  76. 76. col-3 col-3 col-3 col-3
  77. 77. ? ? ? ??
  78. 78. Web app navigation
  79. 79. .parent { display: flex; } .child { flex: 1 0 10%; }
  80. 80. .parent { display: flex; } .child { flex: 1 0 10%; } the CSS code stays the same for 3, 4 or 5 items
  81. 81. Example 4: Reordering content @FrshBakedPixels #edui_flexbox
  82. 82. @media (max-width: 1000px) and (orientation: landscape) { .Breadcrumbs { order: 1;} nav { order: 2;} footer { order: 3;} }
  83. 83.
  84. 84.
  85. 85. Example 5:
 Alignment Shifting Wrapping @FrshBakedPixels #edui_flexbox
  86. 86. Source: https://css-tricks.com/useful-flexbox-technique-alignment-shifting-wrapping/ ≫
  87. 87. .flex-title { display: flex; align-items: flex-end; flex-wrap: wrap; } .flex-title .title-main { flex-grow: 1; }
  88. 88. Browser support @FrshBakedPixels #edui_flexbox
  89. 89. Source: http://caniuse.com/#search=flexbox
  90. 90. .parent { display: flex; align-items: center; } .child { flex: 0 1 auto; } .parent { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .child { -webkit-box-flex: 0; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto; } Browser prefixes
  91. 91. Supporting older browsers Use fallbacks .parent { display: table; display: flex; } .child { display: table-cell; width: 20%; flex: 1 0 20%; } Use Modernizr .no-flexbox .parent { display: table; } .flexbox .parent { display: flex; }
  92. 92. Resources • Flexbox cheat sheet
 https://css-tricks.com/snippets/css/a-guide-to-flexbox • Using Flexbox: Mixing Old and New for the Best Browser Support
 https://css-tricks.com/using-flexbox/ • Video: Enhancing Responsiveness with Flexbox
 https://vimeo.com/124796320 • Autoprefixer
 https://github.com/postcss/autoprefixer • Modernizr
 http://modernizr.com/

×