FlexBox 2022

Почему Flexbox?
Долгое время единственными надёжными инструментами CSS-верстки были такие способы как float (обтекание) и position (позиционирование).
С их помощью сложно или невозможно достичь следующих простых требований к макету:
Вертикального выравнивания блока внутри родителя.
Оформление всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.
Модель верстки Flexbox, создана, чтобы убрать недостатки при создании самых разных HTML-конструкций, в том числе адаптированных под разную ширину и высоту, и сделать верстку логичной и простой

Flexbox
Flexbox предназначен для создания гибких макетов.
Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков).
FlexBox состоит из Контейнера и его Дочерних элементов.

Чтобы начать работать с технологией FlexBox необходимо родительскому контейнеру установить свойство:
Display: flex; или Display:flex-inline;
После этого данный родительский контейнер становится flex-контейнером, а все его непосредственные дочерние элементы – flex-элементами.

Устройство flex-контейнера

При изучении новой темы выполните практическое задание на использование верстки Flexbox.
Создайте папку с 2 файлами index.html и style.css. Подключите файл стилей style.css к файлу index.html
Задание

Создайте блок-обертку (div class= “wrapper”) и в нем несколько блоков с произвольным текстом.
Чтобы быстро создать произвольный текст в блоках, наберите слово Lorem и нажмите Tab
Задание

Чтобы видеть результат, добавьте в файл style.css границу и ширину для блоков
Задание

Чтобы начать использовать модель Flexbox, необходимо задать родительский
flex-контейнер.
В нашем примере это будет div class= “wrapper”.
Flex-контейнер - div class= “wrapper”
Flex-элементы - div class= “item”
Задание

В файле style.css
установите у селектора .wrapper свойству display значение flex
В результате на сайте все блоки должны встать в одну линию.
Задание

Flex-свойства для родительского контейнера

1. Свойство Flex-direction
Свойство flex-direction указывает направление главной оси.

1. Свойство Flex-direction
flex-direction: row; - элементы располагаются слева направо в строку (по умолчанию)
flex-direction: column; - элементы располагаются сверху вниз в столбец
flex-direction: row-reverse; - элементы располагаются справа налево в строку
flex-direction: column-reverse; - элементы располагаются снизу вверх в столбец
Значения свойства flex-direction:

2. Свойство Flex-wrap
Свойство flex-wrap дает возможность дочерним элементам при необходимости переходить на другую строку.
flex-wrap: nowrap; - элементы не переносятся на новую строку (по умолчанию)
flex-wrap: wrap; - элементы переносятся на новую строку

3. Выравнивание дочерних элементов вдоль главной оси (по умолчанию по горизонтали)
Значения свойства justify-content:
justify-content: flex-start; - от начала родительского контейнера (по умолчанию)
justify-content: center; - по центру контейнера
justify-content: flex-end; - с конца контейнера
justify-content: space-around; - элементы равномерно распределены по контейнеру с равным местом вокруг них
justify-content: space-between; - крайние элементы прижимаются к краям, остальные элементы равномерно распределены по контейнеру
Свойство justify-content

3. Выравнивание дочерних элементов вдоль главной оси (по умолчанию по горизонтали)

4. Выравнивание дочерних элементов вдоль поперечной оси (по умолчанию по вертикали)
Значения свойства align-items:
Свойство align-items
align-items: center; - по центру
align-items: flex-start; - с начала
align-items: flex-end; - с конца
align-items: stretch; - на всю высоту (по умолчанию)
align-items: baseline; - по базовой линии

4. Выравнивание дочерних элементов вдоль поперечной оси (по умолчанию по вертикали)

5. align-content - выравнивает и распределяет строки контейнера, когда есть свободное пространство в поперечной оси.
Это свойство не приносит эффекта, когда есть только одна строка flex элементов
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Для родителя (div class= “wrapper”) добавьте свойство justify-content.
Поэкспериментируйте с его значениями.
Задание

Установите значение свойства justify-content, чтобы получить результат как на рисунке:
Чтобы изучать свойства flex дальше, добавьте произвольного текста в центральный блок.
Задание

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

Чтобы изучать свойства flex дальше, установите свойство flex-direction, так чтобы элементы встали в одну линию.
Добавьте в контейнер wrapper еще несколько блоков item и попробуйте различные значения свойства flex-wrap:
Задание

Чтобы лучше видеть результат работы свойства flex-direction абзацы лучше пронумеровать.
Для родителя добавьте свойство
flex-direction, изменяя его значения.
Задание

Flex-свойства для дочерних элементов

1. Свойство Order
Определяет порядок, в котором будут располагаться дочерние элементы. Задается целым числом и по умолчанию равно 0.

2. Свойство Flex-grow
Свойство flex-grow указывает, насколько отдельный элемент будет
больше соседних элементов (по умолчанию 0).
Пример 1:
Если все flex-блоки внутри flex-контейнера имеют flex-grow:1, то они будут одинакового размера
Если один из них имеет flex-grow:2, то он будет в 2 раза больше, чем все остальные
Пример 2:
Если все flex-блоки внутри flex-контейнера имеют flex-grow:3, то они будут одинакового размера
Если один из них имеет flex-grow:12, то он будет в 4 раза больше, чем все остальные

3. Свойство Flex-shrink
Определяет способность flex-элемента сокращаться в случае недостатка свободного места.
По умолчанию равен 1.
Принцип действия у данного свойства такой же, как у свойства flex-grow.

4. Свойство Flex-basis
Базовый размер отдельного элемента, заменяет свойство width
5. Свойство Flex
Свойство flex является сокращенным свойством для задания свойств flex-grow, flex-shrink и flex-basis
Рекомендуется использовать сокращенное свойство, вместо набора индивидуальных свойств.
flex: 0 1 auto; /*по умолчанию*/

6. Свойство Align-self
Выравнивание отдельно взятого flex-блока по поперечной оси. Значения такие же как у align-items.

7. margin: auto – выравнивание блока по вертикали и по горизонтали по центру

Оставьте в контейнере только 3 блока, задав им разные классы.
Исправьте стили
Задание

Добавьте для элементов контейнера различные значения свойства flex-grow .
2 пример
3 пример
1 пример
Задание