Что такое Flexbox (CSS Flexible Box Layout)
Это модель макета, которая позволяет упорядочивать элементы во flex-контейнере. Объекты внутри контейнера называются flex-элементами. Они равномерно распределяются по контейнеру, меняя свои размеры и позиции согласно установленным правилам упорядочивания и размещения в пространстве. С помощью Flexbox можно упорядочить разные по величине элементы в строках или столбцах так, чтобы более крупные объекты занимали больше места, чем объекты меньшего размера.
Flexbox нельзя использовать в следующих случаях:
текущий родительский элемент – текстовый, например <p> или <h1>;
текущий родительский элемент содержит строчные элементы, например <span> или <a> (это не относится к родительским элементам, представляющим собой страницы).
У студентов часто возникает вопрос, как работает CSS Flexbox?
Наглядно объясню возможности технологии с использованием анимации.
Есть страница:На ней размещено 4 div разных размеров, которые находятся внутри серого div. У каждого div есть свойство display: block. Поэтому каждый блок занимает всю ширину строки. Это без использования Flex.
Разберёмся, как работает display flex CSS. Чтобы начать работать с CSS Flexbox, нужно сделать контейнер flex контейнером. Делается это так:
#container {
display: flex;
}
Так у блоков появилось свойство flex-контекст, которое в дальнейшем позволит ими управлять гораздо проще, чем с использованием стандартного CSS.
flex-direction
У flex-контейнера есть две оси: главная и перпендикулярная ей. По умолчанию все предметы располагаются вдоль главной оси — слева направо. Именно поэтому блоки в предыдущем примере выстроились в линию, когда мы применили display: flex. А вот flex-direction позволяет вращать главную ось.
#container {
display: flex;
flex-direction: column;
}
Обратите внимание, что flex-direction: column не выравнивает блоки по оси, перпендикулярной главной. Главная ось сама меняет своё расположение, и теперь направлена сверху вниз.Есть ещё парочка свойств для flex-direction: row-reverse и column-reverse.