text Html Academy Flexbox教程

Posted 2021-05-03

/// Html Academy - изучение FlexBox \\\

Как включить флексбокс?
Очень просто: нужно задать элементу свойство display: flex;. После этого происходит два события:

1. Элемент с display: flex; превращается во «флекс-контейнер» и внутри него начинает происходить вся магия гибкой раскладки.
2. Непосредственные потомки этого элемента превращаются во «флекс-элементы» и начинают играть по новым правилам.

Вместо направлений «лево» и «право» во флексбоксе используется понятие «главная ось». 

По умолчанию главная ось направлена слева направо, но её можно разворачивать во всех направлениях с помощью свойства flex-direction, которое задаётся для флекс-контейнера. Значения свойства:

flex-direction: row; /*значение по умолчанию, главная ось направлена слева направо.*/
flex-direction: column; /*главная ось направлена сверху вниз.*/
flex-direction: row-reverse; /*главная ось направлена справа налево.*/
flex-direction: column-reverse; /*главная ось направлена снизу вверх.*/

Вместо направлений «верх» и «низ» во флексбоксе используется понятие «поперечная ось».

Поперечная ось всегда перпендикулярна главной оси и поворачивается вместе с ней:

Если главная ось направлена горизонтально, то поперечная ось смотрит вниз.
Если главная ось направлена вертикально, то поперечная ось смотрит направо.

Вместо «горизонтального» выравнивания во флексбоксе используется свойство для распределения элементов вдоль главной оси — justify-content. Это свойство задаётся для флекс-контейнера. 

У флексбокса есть чем-то похожие значения justify-content, которые равномерно распределяют флекс-элементы вдоль главной оси:

justify-content: flex-start; /* Значение по умолчанию. При этом значении элементы располагаются у начала главной оси.*/ 
justify-content: center; /*Располагались по центру главной оси*/
justify-content: flex-end; /* Значение flex-end расположит элементы в конце главной оси.*/
justify-content: space-between; /* Расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера отступов нет.*/
justify-content: space-around; /* Расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера есть отступ, равный половине расстояния между соседними элементами.*/

Вместо «вертикального» выравнивания во флексбоксе используется свойство для выравнивания элементов вдоль 
поперечной оси — align-items. Это свойство задаётся для флекс-контейнера. Его значением по умолчанию является stretch. 
Именно благодаря этому значению флекс-элементы и растягиваются на всю «высоту» флекс-контейнера. Если флекс-элементам 
задана высота, то растягиваться они не будут.

Ещё одно значение свойства align-items — это baseline. Если задать его контейнеру, 
то флекс-элементы будут выравниваться по базовой линии текста в них. Эта воображаемая линия проходит по нижней части букв.

Свойство align-items управляет выравниванием элементов вдоль поперечной оси и имеет пять значений:

align-items: stretch; /*Значение по умолчанию. Флекс-элементы и растягиваются на всю «высоту» */
align-items: flex-start; /* Расположить флекс-элементы в начале*/
align-items: flex-end; /* В конце поперечной оси*/
align-items: center; /*По центру поперечной оси*/
align-items: baseline; /*Флекс-элементы будут выравниваться по базовой линии*/

C поперечной осью всё проще. Можно сказать, что у каждого элемента она своя, и можно задавать им разное поперечное выравнивание. 
Для этого используется свойство align-self, которое задаётся для самих флекс-элементов, а не для флекс-контейнера.

У свойства align-self те же самые значения, что и у align-items.

Аналогично align-items для отдельного флекс-элемента можно задать и выравнивание по базовой линии с 
помощью align-self со значением baseline.

Что будет, если флекс-элементов в контейнере станет больше, чем может уместиться в один ряд?

	1. Они будут сжиматься до минимально возможной ширины.
	2. Даже если им задать ширину явно, механизм флексбокса может её уменьшить.
	3. Если они перестанут помещаться в контейнер и после уменьшения, то они выйдут за его пределы, но продолжат располагаться в один ряд.

Такое поведение можно изменить свойством флекс-контейнера flex-wrap. По умолчанию оно имеет значение nowrap, 
то есть перенос флекс-элементов на новую строку запрещён.

Значение wrap разрешает перенос флекс-элементов на новую строку, если они не помещаются в контейнер.

Если перенос флекс-элементов разрешён, то ряды элементов располагаются вдоль поперечной оси. 
Первый ряд располагается в начале поперечной оси, а последний в конце. Но так работает только значение wrap.

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

Свойство align-content связано и со свойством align-items, которое управляет выравниванием флекс-элементов вдоль поперечной оси.
В чём разница между align-content и align-items, когда работает одно, а когда работает другое? Вот ответы:

1. Если есть только один ряд флекс-элементов, то работает align-items.
2. Если есть несколько рядов, то работает align-content.
3. Подчеркнём, что align-content влияет на ряды, а не на отдельные элементы.


Отображение строк при align-content: stretch зависит от значения align-items:

	Если у align-items задано значение stretch, то элементы в строках растягиваются на всю высоту своей строки.
	Если значение отлично от stretch, то элементы в строках ужимаются под своё содержимое и выравниваются 
	в строках в зависимости от значения align-items.

	Значение align-items влияет на отображение рядов во флекс-контейнере, если у align-content 
	задано значение stretch. В этом мы убедились в прошлом задании.

	Свойство align-content — «гибридное». Мы переводим его как «выравнивание», но оно больше похоже 
	на «распределение», justify-content, от которого оно позаимствовало два значения space-between и space-around.

	Близость с «распределением» подчёркивает и отсутствие значения baseline — всё-таки свойство работает 
	с рядами, а не с отдельными элементами.

	От «выравниваний» же, align-items и align-self, это свойство получило значение по умолчанию 
	stretch и возможность «растягивать» ряды по высоте.

И ещё одно свойство, которое мы рассмотрим в этом курсе, — это order, порядковый номер флекс-элемента. Это 
очень полезное свойство, так как с его помощью можно менять порядок следования флекс-элементов в потоке, не меняя HTML-код.

Самый насущный вопрос, который можно легко и изящно решить с помощью флексбокса, — как отцентровать 
элемент по вертикали и горизонтали так, чтобы центровка сохранялась при изменении размеров элемента или контейнера.

Ответ прост: задать контейнеру раскладку флексбокса, а дочернему флекс-элементу margin: auto.

Заметьте, что флекс-элементами внутри флекс-контейнера становятся только прямые потомки, элементы первого уровня вложенности.