CSS Flexible Box Layout — это модуль для выравнивания элементов и распределения пространства между ними. В сети полно кратких шпаргалок, помогающих понять, как управлять элементами внутри flex-контейнера. Однако технология полна нюансов, знание которых сэкономит вам время при работе с реальными проектами. Как быть, если первые два элемента внутри flex-контейнера нужно выровнять по левому краю, а последний — сместить к правому? Веб-разработчики, которые не знают, как решить эту задачу за счет установки значения для всего одного свойства, начинают создавать лишние теги HTML...

Flexbox — это способ управлять расположением элементов внутри блока. Одним измерением: либо строка, либо столбец. Представь поднос с тарелками. Ты решаешь: расставить их вплотную или с промежутками, прижать к одному краю или по центру, выровнять по высоте. Flexbox — это именно такой инструмент. Берёшь родительский контейнер, включаешь display: flex — и его дочерние элементы начинают подчиняться твоим командам. Всё делится на два уровня: свойства контейнера (родителя) и свойства элементов (детей)...