Flex верстка

Контейнер

display: flex; /* или inline-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 | space-evenly;

Вертикальное выравнивание
align-items: stretch | flex-start | flex-end | center | baseline;

Вертикальное выравнивание строк
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Элементы

order: <любое целое число>;

flex-grow: <число>; отступы по краям /* дефолтное 0 */
flex-shrink: <число>; отступы внутри /* дефолтное 1 */
flex-basis: <длина> | auto; ширина /* дефолтное auto */
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

Вертикальное выравнивание
align-self: auto | flex-start | flex-end | center | baseline | stretch;

Подписаться

Будьте в курсе

Получите специальное предложение от нас.

Подписывайтесь и получите скидку 100$ на анализ сайта!

Подписывайтесь и получите скидку 100$ на анализ сайта!

Image Description
Image Description
Image Description