CSS Flexbox (WebElement #35)

CSS Flexbox (WebElement #35)

1633975316e340c5f24414567a3f3679?s=128

Vladimír Kriška

October 08, 2015
Tweet

Transcript

  1. 2.
  2. 3.
  3. 5.
  4. 7.
  5. 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
  6. 10.

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

    visual media (not speech) • use it for visual, not logical ordering
  7. 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%)
  8. 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
  9. 16.
  10. 19.
  11. 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
  12. 23.