Чтобы элементы располагались по центру главной оси, нужно задать для justify-contentзначение center.

 

Курс «Флексбокс, часть 1»

В начале и в конце главной оси [5/31]

Чтобы флекс-элементы располагались в начале главной оси, свойству justify-content нужно задать значение flex-start. Оно же является и значением по умолчанию.

А значение flex-end расположит элементы в конце главной оси.

Обратите внимание, что justify-content: flex-end не меняет порядок элементов, как это происходит при изменении направления оси flex-direction: row-reverse. Элементы просто прижимаются к концу главной оси.

 

Итого: justify-content: flex-start | center | flex-end;

Равномерное распределение [6/31]

Помните ли вы режим горизонтального выравнивания«по ширине», когда текст распределялся в блоке равномерно, а края текста прижимались к краям блока? Совсем как в этом абзаце.

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

· space-between — расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера отступов нет.

· space-around — расстояния между соседними элементами одинаковые, между элементами и краями флекс-контейнера есть отступ, равный половине расстояния между соседними элементами.

Сейчас мы добавим третьего кота и поэкспериментируем с этими значениями justify-content.

А пока небольшой итог. Свойство justify-content управляет распределением элементов вдоль главной оси и имеет пять значений:

· значение по умолчанию flex-start,

· flex-end,

· center,

· space-between,

· space-around.

 

 

Выравнивание флекс-элементов, align-items [7/31]

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

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

Чтобы элементы выровнялись по центру поперечной оси, нужно задать для align-itemsзначение center.А вообще у ниго такие же свойства как и у justify-content.

Короче как я понял, есть две оси, и свойства justify-content и align-item выравнивают каждый по своему

 

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

Если выровнять флекс-элементы по базовой линии, то они выстроятся так, чтобы текст в них был как бы на «одной строке».

Чтобы лучше понять поведение baseline, сравним его с другим значением — flex-start.

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

· значение по умолчанию stretch,

· flex-start,

· flex-end,

· center,

· baseline.

 

 

Курс «Флексбокс, часть 1»

Эгоистичное выравнивание, align-self [10/31]

Распределение элементов по главной оси задаётся для всего флекс-контейнера и на все флекс-элементы действует одинаково. Задать какому-то элементу отличное от других распределение по главной оси нельзя. И это вполне логично, ведь тогда элементы будут «сталкиваться» друг с другом.

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

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

Т.е. вместо align-itemsмы можем отдельно для каждого применить align-self

 

Перенос флекс-элементов, flex-wrap [13/31]

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

· Они будут сжиматься до минимально возможной ширины.

· Даже если им задать ширину явно, механизм флексбокса может её уменьшить.

· Если они перестанут помещаться в контейнер и после уменьшения, то они выйдут за его пределы, но продолжат располагаться в один ряд.

Это чем-то похоже на поведение ячеек в таблице.

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

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

Flex-wrap: nowrap;

Flex-wrap:wrap;

 

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

 

Выравнивание строк флекс-контейнера, align-content [15/31]

Вспомним свойство justify-content, которое управляет распределением флекс-элементов вдоль главной оси.

Есть очень похожее свойство align-content, которое управляет выравниванием рядов флекс-элементов вдоль поперечной оси. У этих свойств почти одинаковые значения:

· flex-start,

· flex-end,

· center,

· space-between,

· space-around,

· и stretch, которое есть у align-content, но нет у justify-content, и является значением по умолчанию.

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

В чём разница между align-content и align-items, когда работает одно, а когда работает другое? Вот ответы:

· Если есть только один ряд флекс-элементов, то работает align-items.

· Если есть несколько рядов, то работает align-content.

· Подчеркнём, что align-content влияет на ряды, а не на отдельные элементы.

В последней версии спецификации это поведение изменилось: теперь правильно, когда align-content выравнивает элементы в многострочном флекс-контейнере, даже если строка в контейнере единственная. Это изменение на момент окончания 2015 года применено только в браузерах Safari и Edge.