Opis

flex jest skróconą własnością dla:

  1. flex-grow
  2. flex-shrink
  3. flex-basis
odnośnie zachowania zawartego w nim elementu elastycznego.

Zobacz też: order (kolejność)

Przykład
1
2
3
Kod:
Wartości

Składnia flex: flex-grow flex-shrink flex-basis | auto | none | initial | inherit;

WartośćOpis
flex-grow flex-shrink flex-basis (rozciąganie). Wartości flex-grow: | number (0) | initial | inherit
(ściskanie). Wartości flex-shrink: | number (1) | initial | inherit
(długość początkowa). Wartości flex-basis: auto | number | initial | inherit
auto 1 1 auto
none 0 0 auto
initial Ustawia tę właściwość na wartość domyślną (0 1 auto).
inherit Dziedziczy tę właściwość po elemencie nadrzędnym.

Przykłady:

WartośćOpis
0 0 200px nie rozszerzaj, nie ściskaj, wartość początkowa elementu: 200px - nie zmieszczą się...
1 1 200px rozszerzaj, ściskaj, wartość początkowa elementu: 200px - element (2) zostanie ściśnięty by zmieścić się w pojemniku
0 0 nie rozszerzaj, nie ściskaj - element (2) będzie miał długość równą zawartości
1 1 0px rozszerzaj, ściskaj, wartość początkowa elementu: 0px - element (2) zostanie rozszerzony by wypełnić pojemnik
Info: Domyślna wartość: 0 1 auto Dziedziczenie: NIE
Animowalność: TAK
JS: object.style.flex