Средний
6 уроков
(1 час 20 минут)
Курс
Flexbox CSS3
На этом видеокурсе вы узнаете о верстке сайтов по технологии Flexbox.

#3 — Свойства Flexbox: flex-wrap, align-content и flex-flow

Снова вас приветствует канал Loftblog и снова вы на видеокурсе по Flexbox! На третьем видеоуроке вы продолжите свое знакомство со свойствами flexbox.

Если вы попробуете разместить новые flex-элементы на новый ряд – flexbox “скрутит вам большую фигу” и все равно разместит их в одну линию. Даже если вы пропишете своим блокам большую ширину или высоту. На этом видеоуроке вы научитесь задавать ряды, выравнивать их и управлять ими. Помчались!

Flex-wrap

За разрешение или запрет переноса flex-элементов на новый ряд отвечает свойство flex-контейнера flex-wrap. Свойство flex-wrap имеет следующие значения:

  • 1) nowrap (дефолтное, запрещает перенос flex-элементов на новый ряд);
  • 2) wrap (разрешает перенос flex-элементов на новый ряд);
  • 3) wrap-reverse (перенос flex-элементов на новый ряд в обратном порядке).

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

Align-content

Свойство flex-контейнера align-content определяет способы растягивания рядов вдоль поперечной оси. Значения свойства align-content таковы:

  • 1) stretch (дефолтное, ряды растягиваются по всей высоте поперечной оси);
  • 2) center (ряды становятся по центру поперечной оси);
  • 3) flex-start (прижимает ряды к началу поперечной оси);
  • 4) flex-end (прижимает ряды к концу поперечной оси);
  • 5) space-between (ряды распределяются равномерно вдоль поперечной оси без отступов по краям);
  • 6) space-around (ряды также распределяются равномерно, но каждый отступ от края поперечной оси равен половине отступа между рядами).

Flex-flow

Последним свойством flex-контейнера, рассмотренным на сегодняшнем видеоуроке, будет свойство flex-flow. Свойство flex-flow объединяет в себе два свойства flex-контейнера: flex-direction и flex-wrap. Соответственно, и значения свойства flex-flow являются объединенными значениями этих двух свойств. Например,

flex-flow: row wrap;

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш Loftblog.

Автор видеокурса – Сергей Михалевич
https://www.youtube.com/c/Master-CSS

Плейлист Flexbox CSS:
http://www.youtube.com/playlist?list=PLY4rE9dstrJzj68Y8SlQlhIdb5hbGQLIU

Материалы к уроку:
Делись:

Оставь комментарий!

Добавить комментарий

Рекомендуемые курсы