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;