CSS Flexbox (WebElement #35)

Transcript

1. CSS FLEXBOX
   Vladimír Kriška (@ujovlado)
   WebElement #35
   

   View Slide

2. View Slide

3. View Slide

4. Classic “floats”
   

   View Slide

5. View Slide

6. Flexbox applied*
   *and minor improvements: styled button, changed image position
   

   View Slide

7. View Slide

8. Container, items, …
   source: http://www.w3.org/TR/css-flexbox-1/
   

   View Slide

9. flex-flow (shorthand)
   flex-direction
   • row, row-reverse, column,
   column-reverse
   • initial value: row
   flex-wrap
   • nowrap, wrap, wrap-reverse
   • initial value: nowrap
   • flex-direction || flex-wrap
   

   View Slide

10. order
    •
    • initial value: 0
    • affects only visual media (not speech)
    • use it for visual, not logical ordering
    

    View Slide

11. Single-line & multi-line
    Once content is broken into lines, each line is independent
    

    View Slide

12. The “flex” property (shorthand)
    • none, [flex-grow && flex-shrink || flex-basis]
    • flex: none
    • 0 0 auto
    • flex: initial (this is an initial value)
    • 0 1 auto
    • flex: auto
    • 1 1 auto
    • flex:
    • 1 0% (e.g. flex: 10 => flex: 10 1 0%)
    

    View Slide

13. flex-grow & flex-shrink & flex-basis
    flex-grow
    how much the flex
    item will grow relative
    to the rest of the flex
    items
    flex-shrink
    how much the flex
    item will shrink
    relative to the rest of
    the flex items
    flex-basis
    initial main size of the
    flex item, before free
    space is distributed
    according to the flex
    factors
    

    View Slide

14. flex: 1 0 20%*
    *with min-width applied and disabled max-width
    min-width: 200px;
    

    View Slide

15. Different flex for each box*
    min-width: 200px;
    *with min-width applied and disabled max-width
    

    View Slide

16. View Slide

17. justify-content
    • flex-start, flex-end, center, space-between, space-around
    • initial value: flex-start
    source: http://www.w3.org/TR/css-flexbox-1/
    

    View Slide

18. justify-content: center
    

    View Slide

19. View Slide

20. align-items, align-self
    align-items
    • flex-start, flex-end, center,
    baseline, stretch
    • initial value: stretch
    • applies to: containers
    align-self
    • auto, flex-start, flex-end, center,
    baseline, stretch
    • initial value: auto
    • applies to: items
    

    View Slide

21. align-items, align-self
    source: http://www.w3.org/TR/css-flexbox-1/
    

    View Slide

22. So, how to center div vertically?
    

    View Slide

23. View Slide

24. Questions?
    No? 
    Thank you!
    

    View Slide