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

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