Flex/Grid
Flexbox Flexbox состоит из гибкого контейнера (flex container) и гибких элементов (flex items). Гибкие элементы могут выстраиваться в строку или столбик, а оставшееся свободное пространство распределяется между ними различными способами. Flex-контейнер устанавливает новый гибкий контекст форматирования для его содержимого. Flex-контейнер не является блочным контейнером, поэтому для дочерних элементов не работают такие CSS-свойства, как float, clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства column-*, создающие колонки в тексте и псевдоэлементы ::first-line и ::first-letter. Flexbox Модуль flexbox позволяет решать следующие задачи: Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх. Переопределять порядок отображения элементов. Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство. Решать проблему с горизонтальным и вертикальным центрированием. Переносить элементы внутри контейнера, не допуская его переполнения. Создавать колонки одинаковой высоты.