Flex

Parent

  1. display: flex

  2. flex-direction: row | row-reverse | column | column-reverse

  3. flex-wrap: nowrap | wrap | wrap-reverse

  4. flex-flow: <flex-direction> || <flex-wrap>

  5. justify-content: flex-start | flex-end | center | space-between | space-around

  6. align-items: flex-start | flex-end | center | stretch | baseline (single row)

  7. align-content: flex-start | flex-end | center | stretch | space-between | space-around (multi-row)

Children(flex-item)

  1. order: <integer>

  2. flex-grow: <number>(0 default)

  3. flex-shrink: <number>(0 default)

  4. flex-basis: <length> | auto (auto default)

  1. flex: none || <flex-grow><flex-shrink><flex-basis>

  2. align-self: auto | flex-start | flex-end | center | stretch | baseline

**notice:** `float`, `clear`, `vertical-align` are unavailable in flex item