Дата публикации: 07.01.2018

Количество просмотров: 410

Flexbox CSS - направление осей и многострочность

В текущем видео разбираем два свойства, первое flex-direction влияющее на управление Осей, второе flex-wrap на многострочность, и многоколоночность элементов. В конце закрепляем все на практическом примере.

Посмотреть видео - 2# Видео-урок по flexbox CSS

See the Pen #2 Flexbox – flex-direction | flex-wrap by Denis (@Dwstroy) on CodePen.

Свойство flex-direction (направление Осей)

Начинаем со свойства flex-direction, оно позволяет изменить порядок направление flex-элементов выводить их как в строчном расположении, так и в колоночном виде. Свойство задается для контейнера и принимает четыре значения. 

flex-direction: row - значение установленное по умолчанию, расположение элементов начинается с лева на право.

Направление осей

flex-direction: row;

flex-direction: row-reverse – меняет порядок элементов, по мимо того что они прижимаются к правому краю блока, их порядок начинается с права на лево.

Flexbox направление осей

 flex-direction: row-reverse;

На самом деле свойство flex-direction, меняет не порядок элементов, как это может показаться на первый взгляд, а меняет направление оси, на которой расположены элементы в контейнере, и тут мы знакомимся с одним из основных понятием flexbox, это Оси.

Всего их две, есть основная ось, которую называют «Главная», и вторая ось «Поперечная», которая идет поперек главной оси.

У каждой из осей есть две составляющие, это начало ее, и конец.

flexbox оси

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

свойство flex-direction

При помощи значение row-reverse, мы переворачиваем главную ось, тем самым меняем направлении ее в нутрии контейнера, все, что было насажено на шампур, соответственно переворачивается вместе с ним. Но обратите внимание, как был элемент «1» в начале оси, так он в начале оси и остался, только теперь ось начинает не с начала, а с его конца.

flex-direction направление осей

Свойства из предыдущего урока justify-content, при помощи которого выравнивали элементы по горизонтали, в данном случае будет работать противоположно. Установим значение center, элементы выравниваются, как и положено посередине контейнера, а вот значение flex-start элементы прижимает к правой стороне, в тоже время flex-end позиционирует элементы в начале контейнера. Обязательно этот момент запомните при использовании flexbox.

flex-direction: column, применяется к поперечной оси и работает так же как row, только в отличие от него, все элементы в контейнере выстраивает в колонку сверху в низ.

Поперечная ось

flex-direction: column;

flex-direction:column-reverse, по аналогии работает как row-reverse, только теперь переворачивает поперечную ось, и порядок элементов в данном случае идет снизу вверх.

Поперечная ось

flex-direction: column-reverse;

Свойство flex-wrap – (многострочность элементов)

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

Свойство применяется к контейнеру и принимает всего три значения.

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

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

flex-wrap: nowrap;

flex-wrap: wrap, создает как многострочность так и многоколоночность элементов, и это зависит от того установлено ли значение column или column-reverse в свойстве flex-direction. Если мы закомментируем данное свойство, то соответственно по умолчанию оно принимает значение row, а значит, все элементы выстроятся в рад с лева на право, и занимают свое стандартное положение. Теперь сжимая область контейнера по ширине, элементы, которые в него не влезают, будут переноситься на следующий ряд.

многострочность элементов

flex-wrap: wrap;

В тоже время, когда установлено значение column или column-reverse, формируются колонки. В нашем случае одна колонка, потому что высота контейнера вычисляется из совокупности всех находящихся в нем элементов, и нам достаточно ее ограничить, что бы увидели формирование нескольких колонок.

формирование колонок

height: 150px;
flex-direction: column-reverse;

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

располагает все элементы в обратном порядке слева на права

flex-wrap: wrap-reverse;

И если у нас есть представление, как использовать свойство flex-wrap, к примеру, для фотогалереи, списков товаров, при помощи которого можем делать респонсивный веб-дизайн, то свойство flex-direction при помощи которого меняем направление осей, не каждому понятно, где его можно применять. Вот именно этот вариант мы рассмотрим в практическом примере.

Перейти к примеру - Смотреть пример

1 предыдущая статья

Отзывы

Без хостинга

Виртуальный хостинг Мак-10

Виртуальный хостинг Мак-15
Написать отзыв

* - Обязательные поля

Выбирай свою тему, и мы напишем когда выйдет по ней очередное видео.