Основа Flexbox. Оси. Теория.

Давайте начнем с самых основ. С самых базовых понятий модуля Flexbox и начнем мы с такого понятия как оси.

Модуль Flexbox приносит нам новый подход к позиционированию элементов, который принципиально отличается от классических методов позиционирования. 

В Flexbox позиционирование элементов основывается на позиционировании элементов относительно двух осей.

Что же это за 2 оси?

Оси - это просто обычные оси координат, такие как ось X и ось Y. Относительно которых будут располагаться элементы на веб-странице. 

Используя модуль Flexbox, вы как бы насиживаете элементы, которые будут располагаться на веб-странице, на эти оси. Вы говорите, как будут располагаться эти элементы относительно этих осей по горизонтали и вертикали.

И самое главное в том, что Flexbox позволяет нам менять направление этой оси. Мы можем сделать так, чтобы эта ось была направлена вправо, влево, вверх и вниз. В зависимости от направления оси и будут располагаться элементы на веб-странице.

Та ось, которая определяет направление элементов называется главной осью, а оставшаяся ось называется вспомогательной осью.

Главную ось Flexbox можно примерно сравнить с шампуром, на который нанизывается какая-то еда. 

Элементы этой еды - это есть те элементы, которые мы будем располагать на веб-странице, а сама ось, ее можно сравнить с шампуром. Примерно такую аналогию для понимания можно привести.

Теперь переходим к конкретным свойствам и самое главное свойство, с помощью которого для элемента можно, включить режим позиционирования блоков Flexbox - это свойство:

display: flex;

Как только элемент на веб-странице получает свойство display: flex для него включается режим флексбоксов и все элементы, которые располагаются у него внутри будут как бы нанизываться на так называемый шампур (на главную ось). 

У элемента, благодаря этому значению flex появляется виртуальная ось, она на веб-странице невидима, но эта ось появляется и на нее начинают нанизываться все дочерние элементы, которые располагаются внутри этого блока.

Наверняка, вы уже знаете, что есть блочные элементы, которые имеют значение display:block, есть строчные элементы, которые имеют значение display: inline и теперь, благодаря модулю Flexbox в CSS появился новый вид элементов, которых называется flex, который и позволяет нам очень гибко позиционировать элементы на веб-странице.

Такое вводное теоретическое видео. Давайте перейдем к практике, чтобы посмотреть более наглядно, как уже сейчас мы можем использовать flexbox для верстки элементов нашей веб-страницы. 

Комментарии: