Сегодня я вернулся ко второму строительному блоку в CSS: Flexbox! Он был создан в 2009 году для облегчения динамических макетов.

Впервые я познакомился с этими концепциями на курсе General Assembly Software Engineering Immersive несколько недель назад. С тех пор я выполнил несколько лабораторных работ и проектов с их использованием. 👩💻

Но самым сильным впечатлением было то, что я много раз играл и переигрывал в Flexbox Froggy & Flexbox Zombies. Каждый раз, когда я переигрывал эти игры, я открывал для себя новое понимание, на которое раньше не обращал внимания, и концепции закреплялись.

Я знаю, что эти игры выглядят глупо, но, по правде говоря, они (без каламбура) меняют ваш опыт обучения 🪄.

Часть 1 Настройка Flexbox

Чтобы начать использовать магию Flexbox, мы должны установить соответствующие контейнеры, добавив дополнительные <div> в наш HTML.

В нашем CSS-файле мы выбираем <div> по классу, который мы ему присвоили, и применяем display: flex.

Затем мы можем начать использовать следующие свойства для назначения элементов, вложенных непосредственно в контейнер…

Часть 2 Свойства выравнивания

Применяется расположение
= Эти свойства & их соответствующие значения применяются на уровне контейнера
Назначение
= Они влияют на расстояние между элементами и их расположение внутри контейнера.

2.1 flex-direction

Назначение

= Определяет направление расположения элементов в контейнере.

Значение по умолчанию

= row (Подобно эффекту display: inline)
—> Элементы вложены непосредственно в контейнер: Заполняются вдоль оси x

Значения

2.2 justify-content

Назначение

—> row
= Промежуток вдоль оси x
—> column
= Расстояние вдоль оси y

Значение по умолчанию

= flex-start

Значения

1. flex-start
   —> Если flex-direction: row
   = Элементы размещаются заподлицо с левой частью контейнера
   —> Если flex-direction: column
   = Элементы размещены заподлицо с верхней частью контейнера

2. flex-end
   —> Если flex-direction: row
   = Элементы размещены заподлицо с правой частью контейнера
   —> Если flex-direction: column
   = Элементы размещены заподлицо с нижней частью контейнера

3. center
   —> Если flex-direction: row
   = Элементы упакованы заподлицо друг с другом & размещены в середине контейнера по оси y
   —> Если flex-direction: column
   = Элементы упакованы заподлицо друг с другом & помещены в середину оси x контейнера

4. space-between
   —> Если flex-direction: row
   = Разделяет оставшееся пространство контейнера по оси x, добавляет равное количество между элементами
   —> Если flex-direction: column
   = Делит оставшееся пространство контейнера по оси y, добавляет равное количество между элементами

5. space-around
   —> Если flex-direction: row
   = Делит оставшееся пространство контейнера по оси x, добавляет равное количество по обе стороны каждого элемента
   —> Если flex-direction: column
   = делит оставшееся пространство контейнера по оси y, добавляет равное количество вокруг обеих сторон каждого элемента.

2.3 align-items

Назначение

—> row = Расстояние вдоль оси y
—> column = расстояние по оси x

Значение по умолчанию

= flex-start

Значения

1. flex-start
   —> Если flex-direction: row
   = Элементы заподлицо с верхом контейнера
   —> Если flex-direction: column
   = Элементы заподлицо с левой частью контейнера

2. baseline
   1/ Нацеливается на самый высокий элемент
   2/ Выравнивает самый верхний/самый левый край (строки/столбца) самого высокого элемента с самым верхним/самым левым (строки/столбца) краем контейнера
   3/ Выравнивает базовую линию остальных элементов с базовой линией самого высокого элемента.

Что такое базовая линия?

= Где «сидят» буквы
—> Окончания букв простираются ниже базовой линии

Пример использования

= Размер содержимого варьируется между элементами
—> Если размер содержимого одинаковый, то базовая линия: Тот же эффект, что и flex-start

1. flex-end
   —> row
   = Выравнивание элементов заподлицо справа от контейнера
   —> column
   = Выравнивание элементов заподлицо с нижней частью контейнера

2. center
   —> row
   = Элементы упакованы заподлицо друг с другом & размещены в середине оси x контейнера
   —> column
   = Элементы, упакованные заподлицо друг с другом & размещенные в середине контейнера по оси y

3. stretch
   —> row
   = Выравнивает верх & низ элемента вровень с верхом & низом контейнера путем растягивания всего элемента
   —> column
   = Выравнивает левую & правую часть элемента заподлицо с левой & правой частью контейнера, растягивая весь элемент.

2.4 order

Назначение

= Поменять положение элемента в группе элементов.

Применение

= К отдельному элементу

Значение по умолчанию

= 0

Значения

= Может быть положительным или отрицательным
Влияние значений

1. Значение по умолчанию для любого элемента: 0
2. Элемент с положительным значением order = Немедленно перемещается назад
3. Элемент с отрицательным значением order = Немедленно перемещен на передний планПричина= order Значения, установленные для элементов —> Расположите элементы в хронологическом порядке (от отрицательных значений к положительным)

2.5 align-self

Назначение

—> row
= Выравнивание отдельного элемента по оси y контейнера
—> column
= Выравнивание отдельного элемента по оси x контейнера

Применение

= К определенному элементу

Значения

= То же, что и `align-items

2.6 flex-wrap

Назначение

= Создать больше пространства для элементов
—> Предоставляя им пространство за пределами их текущей линии
—> Позволяя элементам сохранять размер.

Значение по умолчанию

= nowrap
—> Сжимает элементы, чтобы они поместились в линию.

Значения

1 . nowrap
= Уместить все элементы в 1 строку
—> Даже если это означает их уменьшение.

2.7 align-content

Назначение

= Расстановка & Позиционирование «линий»/»групп» элементов
—> Принимает & манипулирует каждой «линией» так же, как align-items принимает каждый «элемент».

Применение

= Применяется с flex-wrap: wrap
—> Без flex-wrap: wrap, align-content не имеет эффекта

Значения

1. flex-start
   —> Если flex-direction: row
   = Линии заподлицо с верхом контейнера
   —> Если flex-direction: column
   = Линии заподлицо с левой частью контейнера

2. flex-end
   —> Если flex-direction: row
   = Элементы заподлицо с дном контейнера
   —> Если flex-direction: column
   = Элементы заподлицо с правой частью контейнера

3. center
   —> row
   = Линии, упакованные заподлицо друг с & размещены в середине оси x контейнера
   —> column
   = Линии, упакованные заподлицо друг с другом & размещенные в середине контейнера по оси y

4. space-between
   —> Если flex-direction: row
   = Разделяет оставшееся пространство по оси y контейнера, добавляет равное количество между строками
   —> Если flex-direction: column
   = Делит оставшееся пространство контейнера по оси x, добавляет равное количество между строками

5. space-around
   —> Если flex-direction: row
   = Разделяет оставшееся пространство контейнера по оси y, добавляет равное количество по обе стороны каждой строки
   —> Если flex-direction: column
   = делит оставшееся пространство контейнера по оси x, добавляет равное количество по обе стороны каждой линии

6. stretch
   —> row
   = Выравнивает верх и низ строки заподлицо с верхом и низом контейнера, растягивая каждую строку целиком
   —> column
   = Выравнивает левую & правую часть строки заподлицо с левой & правой частью контейнера, растягивая каждую строку.

align-content vs align-items

= align-content: Расстановка & позиционирование строк элементов
= align-items: интервал и позиционирование отдельных элементов

Часть 3 Скорость изменения размеров

3.1 Выравнивание против свойств изменения размера

= Во всех случаях Flexbox создается на контейнере.
Но…
—> Свойства выравнивания: Применяются при выборе контейнера в CSS
—> Свойства изменения размера: Применяются при выборе самих элементов в CSS

3.2 flex-grow

Взаимодействие с другими свойствами

= Обнуляет любой эффект от justify-content
—> Если нет новых строк.

Назначение

= Увеличить элемент(ы), чтобы заполнить все доступное пространство
—> Работает одинаково для горизонтального (flex-direction: row) и вертикального (flex-direction: column) пространства.

Применение

= Непосредственно на элементах
—> Не на контейнере элементов

1. Примените flex-grow: 1 к классу со всеми похожими элементами
2. Отменить рост для определенных элементов, которые не растут = flex-grow: 0
3. Корректировать коэффициенты для определенных элементов, растущих быстрее = flex-grow: 3 —> Растет в 3 раза быстрее, чем любой другой элемент/ flex-grow: 1

Значение по умолчанию

= 0
—> Не будет расти, если ему не прикажут.

Значения

= Соотношения
—> Установите 2 элемента flex-grow: 1 = Оба растут, заполняя доступное пространство с одинаковой скоростью.

Пример

—> Установить, что 1 элемент растет в 2 раза быстрее другого элемента
= flex-grow: 2, flex-grow: 1
= скорость в 2 раза больше, а не в 2 раза больше: оба элемента растут, чтобы заполнить свободное пространство.

3.2 flex-shrink

Назначение

= Реагировать, когда не хватает места для элементов.

Значение по умолчанию

= 1
—> Сжимает без явного задания значений

Значения

= Коэффициенты
—> Используется для управления скоростью уменьшения каждого элемента (Скорость).

Применение

= Элементы уменьшаются со скоростью относительно друг друга

1. Все элементы уменьшаются с одинаковой скоростью = Не устанавливайте flex-shrink: Это покрывается значением по умолчанию
2. Некоторые элементы уменьшаются в 2 раза быстрее= flex-shrink: 2—> Уменьшение в два раза быстрее, чем скорость, а не размер—> На каждый 1 пиксель, эти элементы уменьшаются на 2 пикселя каждый
3. Отказаться от уменьшения = flex-shrink: 0—> Указано для отдельного элемента

Усадка и рост

= Могут использоваться в комбинации
—> По умолчанию: Применять flex-grow = Используется с flex-shrink: 1
= Будет расти и сжиматься в зависимости от наличия дополнительного пространства || отсутствия пространства
—> Если нужно, чтобы элементы сжимались с той же скоростью, что и росли.
= Только установить flex-grow: B/c flex-shrink уже установлен в 1 по умолчанию.

3.3 flex-basis

Назначение

= Начальная точка/идеальный мир (до любого роста или сжатия)
—> Достаточное пространство для размещения flex-basis определенного элемента: Элемент принимает размер, определенный flex-basis
—> Недостаточно места для размещения flex-basis defined: Элемент принимает только тот размер, который разрешен пространством.

Значение по умолчанию

= auto
—> То же, что и значение width.

Значения

Единицы измерения:

1. Пиксели
2. ПроцентыПример: flex-basis: 50%= Занимает 50% ширины контейнера

Применение

—> flex-direction: row
= flex-basis занимает 50% ширины контейнера
—> flex-direction: column
= flex-basis определяет высоту

Окончательные flex-basis вкладчики

1. width/height
   = Если указано flex-basis
   —> width: Переопределена & Игнорируется

2. min-width/min-height
   = Нижний предел для flex-basis.
   Пример: min-width: 300px/min-height: 300px && flex-basis: 100px
   —> Конечная flex-basis = 300px (min-width)

Пример: min-width/min-height > flex-basis set
—> Final flex-basis = min-width/min-height

Порядок переопределения

min/max-width/height > flex-basis > width/height

Взаимодействие с другими свойствами

1. flex-basis: 0
   = Не будет показывать элемент, если не установлено flex-grow
   —> Размер устанавливается на 0, пока не начнется рост

2. flex-shrink: 0
   = Не позволяет Элементу уменьшаться до размера flex-basis.

3. flex-grow не обязательно указывать
   = Если flex-basis > Текущие width/height
   && Элементу не нужно расти за пределы размера flex-basis
   —> flex-basis иногда можно перепутать с flex-grow.

4. Доступное пространство не позволяет использовать размер flex-basis
   = Элемент уменьшается в соответствии с flex-shrink/default shrinking

5. Доступное пространство увеличивается && Элемент задал flex-grow
   = Элемент увеличивается за пределы размера flex-basis.
   Пример: flex-basis: 200px && flex-grow: 1

Часть 4 Свойства сокращений

4.1 flex-flow

Назначение

= Комбинирует flex-direction & flex-wrap.

Значения

= Значения flex-direction & flex-wrap
—> Разделенные пробелом

Пример

flex-flow: row wrap
= Устанавливает строки & заворачивает их в дополнительные строки

4.2 flex

Назначение

= Объединяет 2 настройки: flex-grow, flex-shrink, & flex-basis.

Значения по умолчанию

1. Отставить 3-е значение: flex-basis= flex-basis установлен на 0px по умолчанию —> (в отличие от того, как flex-basis установлен на auto по умолчанию без свойства flex)**.

Пример: flex: 1 0 auto = расти со скоростью 1, не уменьшаться, и использовать width как flex-basis.

1. Отставить 2-е значение: flex-shrink= flex-shrink установлено на 1—> То же, что и обычное flex-shrink по умолчанию.

Пример: flex: 0 300px = Не увеличивать && flex-basis: 300px

1. Отставить оба 2-ое && 3-е значения: flex-shrink & flex-basis= По умолчанию: flex-basis: 0px && flex-shrink: 1.

Пример: flex: 1; = Только устанавливает flex-grow: 1

Значения: Ярлыки ключевых слов

1. flex: auto
   = flex-grow: 1, flex-shrink: 1, flex-basis: auto
   —> Увеличивается & Уменьшается & Сохраняет начальный размер = width

2. flex: none
   = flex-grow: 0, flex-shrink: 0, flex-basis: auto
   —> Не увеличивать & Не уменьшать & Начальный размер = width.

Пример

= flex: 1 1 300px
—> flex: grow shrink basis

Внимание

= Установка flex без указания 3-го значения
—> Устанавливает flex-basis с auto на 0px.

…И это все для CSS Flexbox! Я буду возвращаться сюда, чтобы добавить дополнительные заметки и примеры использования после дальнейшего личного применения. Мне очень хочется продолжить делиться с вами своим опытом<3

На следующей неделе мы перейдем к CSS Grid, чтобы завершить CSS Essentials! 🤳

С любовью,
Анжелина