Tutorial web

Display Grid

Proprietăți pentru container:

  1. display: flex
  2. flex-direction: row | column | row-reverse | column-reverse
  3. flex-wrap: row-wrap: nowrap | wrap | wrap-reverse
  4. flex-flow: shortcut pt flex-direction || flex-wrap
  5. justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly == alinierea pe rând
  6. align-items: flex-start | flex-end | center | stretch | baseline
  7. align-content: flex-start | flex-end | center | space-around | space-between | stretch (default) == alinierea pe verticală pe mai multe linii

Itemi

  1. order: <integer> default is 0
  2. flex-grow: <number>

    3. Proprietate care setează spațiul dat unui item din spațiul disponibil al containerului.

  3. flex-shrink: <number> == default este 1
  4. flex-basis: default size = 80%, 4em etc sau auto
  5. flex: flex-grow | flex-shrink | flex-basis = shorthand
  6. align-self: flex-start | flex-end | center | stretch | baseline | auto

Bibliografie