An introduction to the CSS Flexible Box Layout Module. Presented at the December 2016 meeting of the DublinCSS group - https://www.meetup.com/DublinCSS/events/233315123/

1. Getting Started with Flexbox
Adrian Sandu, @adysandu
12 December, 2016, DublinCSS

2. What is Flexbox?
The CSS Flexible Box Layout Module Level 1
aims at providing a more efficient way to lay out, align
and distribute space among items in a container, even
when their size is unknown and/or dynamic.
“

3. A bit of terminology
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

5. How do you trigger Flexbox?
Image source: http://caniuse.com/#feat=flexbox

6. Properties for the Parent: flex-direction
Image source: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

7. Properties for the Parent: flex-wrap
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
nowrap wrap
wrap-reverse

8. Properties for the Parent: flex-flow

9. Properties for the Parent: justify-content
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-endflex-start center
space-between space-around

10. Properties for the Parent: align-items
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-endflex-start center
baseline stretch

11. Properties for the Parent: align-content
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
flex-endflex-start center
space-between stretchspace-around

12. Properties for the Children: order
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

13. Properties for the Children: flex-grow
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

14. Properties for the Children: flex-shrink
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

15. Properties for the Children: flex-basis
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

16. Properties for the Children: flex
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

17. Properties for the Children: align-self
Image source: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

18. Flexbox in the wild – some examples

19. Questions?