Układ elastyczny CSS

Źródło: CSS Flexible Box Layout Module Level 1

align-content

Wyrównanie wierszy

Wartość: flex-start | flex-end | center | space-between | space-around | stretch
Inicjalizacja: stretch
Zastosowanie: kontener elastyczny, którego elementy zostały ułożone w wielu wierszach
Dziedziczenie: nie
Procenty: nie

align-items

Wspólne wyrównanie wiersza

Wartość: flex-start | flex-end | center | baseline | stretch
Inicjalizacja: stretch
Zastosowanie: kontener elastyczny
Dziedziczenie: nie
Procenty: nie

align-self

Indywidualne wyrównanie wiersza

Wartość: auto | flex-start | flex-end | center | baseline | stretch
Inicjalizacja: auto
Zastosowanie: dzieci kontenera elastycznego
Dziedziczenie: nie
Procenty: nie

flex

Atrybuty mieszane układu elastycznego

Wartość: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
Inicjalizacja: 0 1 auto
Zastosowanie: dzieci kontenera elastycznego
Dziedziczenie: nie
Procenty: zobacz cechy indywidualne

flex-basis

Baza układu elastycznego

Wartość: content | <'width'>
Inicjalizacja: auto
Zastosowanie: dzieci kontenera elastycznego
Dziedziczenie: nie
Procenty: odnosi się do wewnętrznego rozmiaru kontenera elastycznego

flex-direction

Kierunek przepływu układu elastycznego

Wartość: row | row-reverse | column | column-reverse
Inicjalizacja: row
Zastosowanie: kontener elastyczny
Dziedziczenie: nie
Procenty: nie

flex-flow

Atrybuty mieszane przepływu układu elastycznego

Wartość: <'flex-direction'> || <'flex-wrap'>
Inicjalizacja: zobacz cechy indywidualne
Zastosowanie: zobacz cechy indywidualne
Dziedziczenie: zobacz cechy indywidualne
Procenty: zobacz cechy indywidualne

flex-grow

Rozciągnięcie układu elastycznego

Wartość: <number>
Inicjalizacja: 0
Zastosowanie: dzieci kontenera elastycznego
Dziedziczenie: nie
Procenty: nie

flex-shrink

Ściśnięcie układu elastycznego

Wartość: <number>
Inicjalizacja: 1
Zastosowanie: dzieci kontenera elastycznego
Dziedziczenie: nie
Procenty: nie

flex-wrap

Zawijanie przepływu układu elastycznego

Wartość: nowrap | wrap | wrap-reverse
Inicjalizacja: nowrap
Zastosowanie: kontener elastyczny
Dziedziczenie: nie
Procenty: nie

justify-content

Justowanie zawartości układu elastycznego

Wartość: flex-start | flex-end | center | space-between | space-around
Inicjalizacja: flex-start
Zastosowanie: kontener elastyczny
Dziedziczenie: nie
Procenty: nie

order

Kolejność układu elastycznego

Wartość: <integer>
Inicjalizacja: 0
Zastosowanie: dzieci kontenera elastycznego
Dziedziczenie: nie
Procenty: nie

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`align-content: wartość`	29 2013-08-20	28 2014-03-18	12 2015-07-29	16 2013-08-27	9 2015-09-30
`align-items: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	16 2013-08-27	9 2015-09-30
`align-self: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex: none`	21 2012-07-31	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-basis: wartość`	29 2013-08-20	22 2013-06-25	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex-basis: auto`	22 2012-09-25	22 2013-06-25	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex-basis: content`	94 2021-09-21	61 2018-06-26	94 2021-09-24	80 2021-10-05	15.4 2022-03-14
`flex-direction: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex-direction: column`	21 2012-07-31	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-direction: column-reverse`	21 2012-07-31	81 2020-09-22	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-direction: row`	21 2012-07-31	≤72 2020-01-07	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-direction: row-reverse`	21 2012-07-31	81 2020-09-22	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-flow: wartość`	29 2013-08-20	28 2014-03-18	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex-grow: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex-shrink: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`flex-wrap: wartość`	29 2013-08-20	28 2014-03-18	12 2015-07-29	16 2013-08-27	9 2015-09-30
`flex-wrap: nowrap`	21 2012-07-31	28 2014-03-18	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-wrap: wrap`	21 2012-07-31	28 2014-03-18	12 2015-07-29	15 2013-07-02	7 2013-10-22
`flex-wrap: wrap-reverse`	21 2012-07-31	28 2014-03-18	12 2015-07-29	15 2013-07-02	7 2013-10-22
`justify-content: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30
`order: wartość`	29 2013-08-20	20 2013-04-02	12 2015-07-29	12.1 2012-11-20	9 2015-09-30