$30 off During Our Annual Pro Sale. View Details »

CSS Flexbox (WebElement #35)

CSS Flexbox (WebElement #35)

Vladimír Kriška

October 08, 2015
Tweet

More Decks by Vladimír Kriška

Other Decks in Programming

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