Как понять оси Flexbox и перестать путать выравнивание
Как понять оси Flexbox и перестать путать выравнивание Соберите контейнер с тремя блоками и добавьте ему display: flex. По умолчанию элементы стоят в строке: главная ось идёт по горизонтали, а поперечная по вертикали. Свойство justify-content выравнивает элементы вдоль главной оси, align-items вдоль поперечной. Теперь переключите flex-direction с row на column и оставьте остальные правила прежними. Элементы начнут двигаться иначе, потому что главная ось станет вертикальной, а поперечная горизонтальной. Так проще увидеть, почему знакомое свойство иногда сдвигает блоки не в ту сторону, которую вы ожидали. Меняйте по одному значению: попробуйте flex-start, center и space-between, затем сравните строку и столбец. Схема двух осей и готовые шаблоны Flexbox помогут закрепить результат на навигации, карточке с текстом и подвале страницы.