Why you should consider FLEXBOX for your next project

This is my presentation slides given at SAWEBDEV meet up on 7/19/2016. I briefly talk about what problems flexbox solves, when to use it and when not to use it, as well as look at each of the flexbox properties with examples.

Transcript

1. WHY YOU SHOULD CONSIDER FLEXBOX FOR YOUR NEXT PROJECT
2. ABOUT ME ▸ Anton Domratchev ▸ Software Developer at Grok Interactive ▸ PHP, Ruby ▸ HTML, SCSS, ES6, ReactJS antondomratchev @antondom
3. WHAT IS FLEXBOX? 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
4. FLEXBOX BROWSER SUPPORT
5. WHEN SHOULD I NOT USE FLEXBOX? ▸ Don’t use flexbox for overall page layout* ▸ Don’t use flexbox on every container ▸ IE8 & IE9
6. WHEN SHOULD I USE FLEXBOX? ▸ Scaling ▸ Vertical Alignment ▸ Horizontal Alignment ▸ Ordering
7. FLEXBOX BASICS ‣ Axes - determined by flex-direction property main axis cross axis
8. FLEXBOX BASICS ‣ flex-direction: row main axis cross axis
9. FLEXBOX BASICS ‣ flex-direction: column cross axis main axis
10. FLEXBOX PROPERTIES Container flex properties ‣ display: flex ‣ flex-direction: row/reverse, column/reverse ‣ flex-wrap: nowrap, wrap/reverse ‣ (axis) justify-content: flex-start, flex-end, center, space-between, space- around ‣ (axis) align-items: stretch, flex-start, flex-end, center, baseline ‣ (wrapped items) align-content: stretch, flex-start, flex-end, center, space- around, space-between
11. FLEXBOX PROPERTIES Container item flex properties ‣ order: n ‣ flex-grow: n ‣ flex-shrink: n ‣ flex-basis: n [px] ‣ flex: flex-grow n flex-shrink n flex-basis n [px] ‣ align-self: flex-start, flex-end, center, stretch
12. FLEXBOX IN ACTION flex-direction http://codepen.io/antond/pen/vKdbVX? editors=1100#0
13. FLEXBOX IN ACTION flex-wrap http://codepen.io/antond/pen/vKdbVX? editors=1100#0
14. FLEXBOX IN ACTION justify-content http://codepen.io/antond/pen/vKdbVX? editors=1100#0
15. FLEXBOX IN ACTION align-items http://codepen.io/antond/pen/vKdbVX? editors=1100#0
16. FLEXBOX IN ACTION align-content http://codepen.io/antond/pen/vKdbVX? editors=1100#0
17. FLEXBOX IN ACTION order http://codepen.io/antond/pen/vKdbVX? editors=1100#0
18. FLEXBOX IN ACTION flex-grow http://codepen.io/antond/pen/vKdbVX? editors=1100#0
19. FLEXBOX IN ACTION flex-shrink http://codepen.io/antond/pen/vKdbVX? editors=1100#0
20. FLEXBOX IN ACTION flex-basis http://codepen.io/antond/pen/vKdbVX? editors=1100#0
21. FLEXBOX IN ACTION flex http://codepen.io/antond/pen/vKdbVX? editors=1100#0
22. FLEXBOX IN ACTION align-self http://codepen.io/antond/pen/vKdbVX? editors=1100#0
23. FLEXBOX IN ACTION align-self http://codepen.io/antond/pen/vKdbVX? editors=1100#0
24. TOOLS TO HELP YOU LEARN FLEXBOX MDN flexible box documentation
 Flexbox Froggy Ultimate Flexbox Cheat Sheet Sketching with CSS antondomratchev @antondom