CSS Flex Box Layout
CSS Flex Box Layout (wł. Flexible Box) – moduł zapewniający efektywniejszy i skuteczniejszy sposób na zarządzanie wyrównaniem, rozkładem elementów wewnątrz kontenerów oraz samymi kontenerami.
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.
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;