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

#2 — Свойства Flexbox: flex-direction, justify-content и align-items. Главная и поперечная оси flex-контейнера

Приветствуем всех на втором видеоуроке курса Flexbox CSS3. Сегодняшний урок посвятит вас в тайны такого понятия, как оси во Flexbox, познакомит вас с некоторыми свойствами flex-контейнера. Оси – это главное во Flexbox, потому как именно с их помощью вы сможете “рулить” размещением flex-элементов. И если вы поймете, как ими управлять – полдела уже сделано! Этим сегодня мы и займемся.


Главная и поперечная оси flex-контейнера

Каждый flex-контейнер имеет две оси, вдоль которых располагаются flex-элементы в зависимости от заданных значений свойств flex-контейнера. Одна из осей — главная — по умолчанию имеет направление слева направо. Вторая ось flex-контейнера — поперечная. Она всегда перпендикулярна главной и по умолчанию имеет направление сверху вниз. Все flex-элементы внутри flex-контейнера растягиваются по дефолту по высоте поперечной оси.

Главные свойства flex-контейнера

Все свойства Flexbox подразделяются на два типа: свойства flex-контейнера и свойства flex-элементов.На сегодняшнем видеоуроке вы изучите три главных свойства flex-контейнера.

Flex-direction — свойство flex-контейнера

Первое свойство, с которым вы познакомитесь на этом видеоуроке — это свойство flex-контейнера — flex-direction. Свойство flex-direction отвечает за направление главной оси. Оно имеет четыре значения:

  • 1) row (дефолтное),
  • 2) column (сверху вниз),
  • 3) row-reverse (справа налево),
  • 4) column-reverse (снизу вверх).

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

Стоит отметить очень важную особенность поперечной оси. Главной оси мы можем задавать любое направление, поперечная же свое направление никогда не меняет. Если главная ось расположена горизонтально независимо от направления, то поперечная всегда направлена сверху вниз. А если главная занимает вертикальное положение и при этом направлена либо вниз, либо вверх, то поперечная всегда имеет направление слева направо.

Justify-content — свойство flex-контейнера

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

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

Align-items — свойство flex-контейнера

Последним свойством, о котором вы узнаете на этом видеоуроке, будет свойство flex-контейнера — align-items. Значения свойства align-items определяют расположение flex-элементов вдоль поперечной оси. Всего их пять:

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

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

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

Автор видеокурса – Сергей Михалевич.

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

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

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

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