CSS Flexbox (WebElement #35)

Transcript

1. 1.

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

2. 2.

   None
3. 3.

   None
4. 4.

   Classic “floats”

5. 5.

   None
6. 6.

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

7. 7.

   None
8. 8.

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

9. 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
10. 10.

    order • <int> • initial value: 0 • affects only

    visual media (not speech) • use it for visual, not logical ordering
11. 11.

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

    line is independent
12. 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: <int> • <int> 1 0% (e.g. flex: 10 => flex: 10 1 0%)
13. 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
14. 14.

    flex: 1 0 20%* *with min-width applied and disabled max-width

    min-width: 200px;
15. 15.

    Different flex for each box* min-width: 200px; *with min-width applied

    and disabled max-width
16. 16.

    None
17. 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/
18. 18.

    justify-content: center

19. 19.

    None
20. 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
21. 21.

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

22. 22.

    So, how to center div vertically?

23. 23.

    None
24. 24.

    Questions? No?  Thank you!