Модели отображения

Блочная модель

display: block;

Блочные элементы располагаются один над другим, вертикально

Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.

Гибкий контейнер - FlexBox

display: flex;

Представляет собой способ компоновки элементов, в основе которого лежит идея оси.

Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами.

Порядок отображения во FlexBox

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Управление многострочностью во FlexBox

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

Гибкость flex-элементов

Важнейшим моментом гибкого макета является возможность сгибать flex-элементы, изменяя их ширину / высоту

Рост flex-элементов:

flex-grow: 0;

flex-grow: 1;

flex-grow: <число>

Гибкость flex-элементов

Сжатие flex-элементов

flex-shrink: 1;

flex-shrink: 0;

flex-shrink: <число>

Гибкость flex-элементов

Базовый размер flex-элементов

flex-basis: auto;

flex-basis: 100%;

flex-basis: <число%>

Выравнивание во Flexbox

Выравнивание по главной оси

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

Выравнивание во Flexbox

Выравнивание по поперечной оси

align-items: stretch;

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

Выравнивание flex-элементов

align-self: auto;

align-self: flex-start;

align-self: flex-end;

align-self: center;

align-self: baseline;

align-self: stretch;

Сетка - Grid

display: grid;

Модуль макета CSS сетки предлагает систему компоновки на основе сетки, со строками и столбцами.

Макет сетки состоит из родительского элемента, с одним или несколькими дочерними элементами.

Размеры Grid

grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;

grid-template-columns: 100px 1fr 100px;
grid-template-rows: 1fr 1fr;

grid-template-columns: 1fr 1fr;
grid-template-rows: 100px 1fr 50px;

Отступы между элементами Grid

grid-column-gap: 10px;
grid-row-gap: 2rem;

grid-column-gap: 0;
grid-row-gap: 0;

Выравнивание элементов Grid

Выравнивание вдоль столбцов

justify-items: stretch;

justify-items: start;

justify-items: end;

justify-items: center;

Выравнивание элементов Grid

Выравнивание вдоль строк

align-items: stretch;

align-items: start;

align-items: end;

align-items: center;

Настройка элементов Grid

grid-column-start: 1;
grid-column-end: 1;
grid-row-start: 1;
grid-row-end: 1;

Определяют местоположение в сетке ссылаясь на конкретные ячейки. grid-column-start/grid-row-start - это ячейки с которой начинается элемент, а grid-column-end/grid-row-end - это ячейки на которой элемент заканчивается.

Выравние отдельных элементов Grid

Выравнивает содержимое элемента вдоль оси столбца. Это значение применяется к содержимому внутри отдельного элемента.

justify-self: stretch;

justify-self: start;

justify-self: end;

justify-self: center;

Выравние отдельных элементов Grid

Выравнивает содержимое элемента вдоль оси строки. Это значение применяется к содержимому внутри отдельного элемента.

align-self: stretch;

align-self: start;

align-self: end;

align-self: center;

Строчная модель

Элементы выстраиваются друг за другом, как, по сути, обычные буквы в строке.

display: inline;

display: inline-block;

display: inline-flex;

display: inline-grid;

Строчная модель

Выравнивание строчных элементов.

vertical-align: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;