Количество просмотров:
0
Flexbox CSS - направление осей и многострочность
В текущем видео разбираем два свойства, первое flex-direction влияющее на управление Осей, второе flex-wrap на многострочность, и многоколоночность элементов. В конце закрепляем все на практическом примере.
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 – меняет порядок элементов, по мимо того что они прижимаются к правому краю блока, их порядок начинается с права на лево.
flex-direction: row-reverse;
На самом деле свойство flex-direction, меняет не порядок элементов, как это может показаться на первый взгляд, а меняет направление оси, на которой расположены элементы в контейнере, и тут мы знакомимся с одним из основных понятием flexbox, это Оси.
Всего их две, есть основная ось, которую называют «Главная», и вторая ось «Поперечная», которая идет поперек главной оси.
У каждой из осей есть две составляющие, это начало ее, и конец.
По умолчанию, главная ось начинается в начала контейнера, и заканчивается в его конце, а все элементы это как куски мяса насаженные на шампур и идущие друг за другом до самого начала контейнера.
При помощи значение row-reverse, мы переворачиваем главную ось, тем самым меняем направлении ее в нутрии контейнера, все, что было насажено на шампур, соответственно переворачивается вместе с ним. Но обратите внимание, как был элемент «1» в начале оси, так он в начале оси и остался, только теперь ось начинает не с начала, а с его конца.
Свойства из предыдущего урока 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-элементы не переносятся, располагаются в одну линию или колонку, то есть то что видим сейчас.
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 при помощи которого меняем направление осей, не каждому понятно, где его можно применять. Вот именно этот вариант мы рассмотрим в практическом примере.
Перейти к примеру - Смотреть пример