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[edytuj | edytuj kod]
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[edytuj | edytuj kod]
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[edytuj | edytuj kod]
- ↑ 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, Flexbox, kompendium wiedzy | Łukasz Bącik - Blog [online], Flexbox, kompendium wiedzy | LukaszBacik.pl [dostęp 2022-02-07] (pol.).