CSS Flex Box Layout

CSS Flex Box Layout (wł. Flexible Box^[1]) – moduł zapewniający efektywniejszy i skuteczniejszy sposób na zarządzanie wyrównaniem, rozkładem elementów wewnątrz kontenerów oraz samymi kontenerami^[2].

Opis

Głównym założeniem CSS Flex Box Layout jest nadanie elementom możliwości zmiany szerokości, wysokości oraz rozmieszczenia w różnych konfiguracjach^[2].

Główne pojęcia

Odnoszące się do kontenera:

display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Odnoszące się do elementów:

order: <integer>;
flex-grow: <number>;
flex-shrink: <number>;
flex-basis: <length> | auto;
align-self: auto | flex-start | flex-end | center | baseline | stretch^[3];

Przypisy

↑ CSS Flexible Box Layout Module Level 1 [online], www.w3.org [dostęp 2016-05-15] .
↑ ^a ^b Flexbox Layout - część 1 - parent container [online], Dawid Ryłko, 14 maja 2016 [dostęp 2016-05-15] [zarchiwizowane z adresu 2016-05-15] (pol.).
↑ ŁukaszŁ. Bącik ŁukaszŁ., Flexbox, kompendium wiedzy | Łukasz Bącik - Blog [online], Flexbox, kompendium wiedzy | LukaszBacik.pl [dostęp 2022-02-07] (pol.).

Linki zewnętrzne

[1] CSS Flexible Box Layout Module Level 1 [online], www.w3.org [dostęp 2016-05-15] .

[:0-2] Flexbox Layout - część 1 - parent container [online], Dawid Ryłko, 14 maja 2016 [dostęp 2016-05-15] [zarchiwizowane z adresu 2016-05-15] (pol.).

[3] ŁukaszŁ. Bącik ŁukaszŁ., Flexbox, kompendium wiedzy | Łukasz Bącik - Blog [online], Flexbox, kompendium wiedzy | LukaszBacik.pl [dostęp 2022-02-07] (pol.).

[1]

[2]

[3]