Некоторые основные принципы работы с CSS Flexbox:

• Эластичный дизайн. 1 Элементы могут изменять свои размеры в зависимости от доступного пространства. 1
• Мин- и макси-размеры. 1 Установка минимальной и максимальной ширины помогает ограничить нежелательное растягивание элементов. 1
• Процентные размеры и отступы. 1 Использование процентов вместо фиксированных пикселей позволяет блокам оставаться пропорциональными. 1
• Соотношение сторон. 1 Контроль над соотношением сторон элементов позволяет сохранять внешний вид при изменении размеров окна браузера. 1
• Главная и поперечная оси. 24 Главная ось определяет основное направление, по которому располагаются элементы, по умолчанию она направлена горизонтально, слева направо. 24 Поперечная ось перпендикулярна главной. 2
• Настройка направления осей. 2 Направление главной и поперечной осей настраивается с помощью свойства flex-direction. 2
• Управление размерами элементов. 3 Свойства flex-grow, flex-shrink и flex-basis позволяют контролировать размеры элементов внутри flex-контейнера. 3 flex-grow определяет, как элемент будет расти, если в контейнере есть свободное пространство, flex-shrink управляет способностью элемента сжиматься, если пространство ограничено, flex-basis задаёт начальный размер элемента до распределения свободного пространства. 3