Сегодня я вернулся ко второму строительному блоку в CSS: Flexbox! Он был создан в 2009 году для облегчения динамических макетов.
Впервые я познакомился с этими концепциями на курсе General Assembly Software Engineering Immersive несколько недель назад. С тех пор я выполнил несколько лабораторных работ и проектов с их использованием. 👩💻
Но самым сильным впечатлением было то, что я много раз играл и переигрывал в Flexbox Froggy & Flexbox Zombies. Каждый раз, когда я переигрывал эти игры, я открывал для себя новое понимание, на которое раньше не обращал внимания, и концепции закреплялись.
Я знаю, что эти игры выглядят глупо, но, по правде говоря, они (без каламбура) меняют ваш опыт обучения 🪄.
- Часть 1 Настройка Flexbox
- Часть 2 Свойства выравнивания
- 2.1 flex-direction
- Назначение
- Значение по умолчанию
- Значения
- 2.2 justify-content
- Назначение
- Значение по умолчанию
- Значения
- 2.3 align-items
- Назначение
- Значение по умолчанию
- Значения
- 2.4 order
- Назначение
- Применение
- Значение по умолчанию
- Значения
- 2.5 align-self
- Назначение
- Применение
- Значения
- 2.6 flex-wrap
- Назначение
- Значение по умолчанию
- Значения
- 2.7 align-content
- Назначение
- Применение
- Значения
- align-content vs align-items
- Часть 3 Скорость изменения размеров
- 3.1 Выравнивание против свойств изменения размера
- 3.2 flex-grow
- Взаимодействие с другими свойствами
- Назначение
- Применение
- Значение по умолчанию
- Значения
- Пример
- 3.2 flex-shrink
- Назначение
- Значение по умолчанию
- Значения
- Применение
- Усадка и рост
- 3.3 flex-basis
- Назначение
- Значение по умолчанию
- Значения
- Применение
- Взаимодействие с другими свойствами
- Часть 4 Свойства сокращений
- 4.1 flex-flow
- Назначение
- Значения
- Пример
- 4.2 flex
- Назначение
- Значения по умолчанию
- Значения: Ярлыки ключевых слов
- Пример
- Внимание
Часть 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
Значения
-
flex-start
—> Еслиflex-direction: row
= Элементы размещаются заподлицо с левой частью контейнера
—> Еслиflex-direction: column
= Элементы размещены заподлицо с верхней частью контейнера -
flex-end
—> Еслиflex-direction: row
= Элементы размещены заподлицо с правой частью контейнера
—> Еслиflex-direction: column
= Элементы размещены заподлицо с нижней частью контейнера -
center
—> Еслиflex-direction: row
= Элементы упакованы заподлицо друг с другом & размещены в середине контейнера по оси y
—> Еслиflex-direction: column
= Элементы упакованы заподлицо друг с другом & помещены в середину оси x контейнера -
space-between
—> Еслиflex-direction: row
= Разделяет оставшееся пространство контейнера по оси x, добавляет равное количество между элементами
—> Еслиflex-direction: column
= Делит оставшееся пространство контейнера по оси y, добавляет равное количество между элементами -
space-around
—> Еслиflex-direction: row
= Делит оставшееся пространство контейнера по оси x, добавляет равное количество по обе стороны каждого элемента
—> Еслиflex-direction: column
= делит оставшееся пространство контейнера по оси y, добавляет равное количество вокруг обеих сторон каждого элемента.
2.3 align-items
Назначение
—> row
= Расстояние вдоль оси y
—> column
= расстояние по оси x
Значение по умолчанию
= flex-start
Значения
-
flex-start
—> Еслиflex-direction: row
= Элементы заподлицо с верхом контейнера
—> Еслиflex-direction: column
= Элементы заподлицо с левой частью контейнера -
baseline
1/ Нацеливается на самый высокий элемент
2/ Выравнивает самый верхний/самый левый край (строки/столбца) самого высокого элемента с самым верхним/самым левым (строки/столбца) краем контейнера
3/ Выравнивает базовую линию остальных элементов с базовой линией самого высокого элемента.
Что такое базовая линия?
= Где «сидят» буквы
—> Окончания букв простираются ниже базовой линии
Пример использования
= Размер содержимого варьируется между элементами
—> Если размер содержимого одинаковый, то базовая линия: Тот же эффект, что и flex-start
-
flex-end
—>row
= Выравнивание элементов заподлицо справа от контейнера
—>column
= Выравнивание элементов заподлицо с нижней частью контейнера -
center
—>row
= Элементы упакованы заподлицо друг с другом & размещены в середине оси x контейнера
—>column
= Элементы, упакованные заподлицо друг с другом & размещенные в середине контейнера по оси y -
stretch
—>row
= Выравнивает верх & низ элемента вровень с верхом & низом контейнера путем растягивания всего элемента
—>column
= Выравнивает левую & правую часть элемента заподлицо с левой & правой частью контейнера, растягивая весь элемент.
2.4 order
Назначение
= Поменять положение элемента в группе элементов.
Применение
= К отдельному элементу
Значение по умолчанию
= 0
Значения
= Может быть положительным или отрицательным
Влияние значений
- Значение по умолчанию для любого элемента:
0
- Элемент с положительным значением
order
= Немедленно перемещается назад - Элемент с отрицательным значением
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
не имеет эффекта
Значения
-
flex-start
—> Еслиflex-direction: row
= Линии заподлицо с верхом контейнера
—> Еслиflex-direction: column
= Линии заподлицо с левой частью контейнера -
flex-end
—> Еслиflex-direction: row
= Элементы заподлицо с дном контейнера
—> Еслиflex-direction: column
= Элементы заподлицо с правой частью контейнера -
center
—>row
= Линии, упакованные заподлицо друг с & размещены в середине оси x контейнера
—>column
= Линии, упакованные заподлицо друг с другом & размещенные в середине контейнера по оси y -
space-between
—> Еслиflex-direction: row
= Разделяет оставшееся пространство по оси y контейнера, добавляет равное количество между строками
—> Еслиflex-direction: column
= Делит оставшееся пространство контейнера по оси x, добавляет равное количество между строками -
space-around
—> Еслиflex-direction: row
= Разделяет оставшееся пространство контейнера по оси y, добавляет равное количество по обе стороны каждой строки
—> Еслиflex-direction: column
= делит оставшееся пространство контейнера по оси x, добавляет равное количество по обе стороны каждой линии -
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
) пространства.
Применение
= Непосредственно на элементах
—> Не на контейнере элементов
- Примените
flex-grow: 1
к классу со всеми похожими элементами - Отменить рост для определенных элементов, которые не растут =
flex-grow: 0
- Корректировать коэффициенты для определенных элементов, растущих быстрее =
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
—> Сжимает без явного задания значений
Значения
= Коэффициенты
—> Используется для управления скоростью уменьшения каждого элемента (Скорость).
Применение
= Элементы уменьшаются со скоростью относительно друг друга
- Все элементы уменьшаются с одинаковой скоростью = Не устанавливайте
flex-shrink
: Это покрывается значением по умолчанию - Некоторые элементы уменьшаются в 2 раза быстрее=
flex-shrink: 2
—> Уменьшение в два раза быстрее, чем скорость, а не размер—> На каждый 1 пиксель, эти элементы уменьшаются на 2 пикселя каждый - Отказаться от уменьшения =
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
.
Значения
Единицы измерения:
- Пиксели
- ПроцентыПример:
flex-basis: 50%
= Занимает 50% ширины контейнера
Применение
—> flex-direction: row
= flex-basis
занимает 50% ширины контейнера
—> flex-direction: column
= flex-basis
определяет высоту
Окончательные flex-basis
вкладчики
-
width
/height
= Если указаноflex-basis
—>width
: Переопределена & Игнорируется -
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
Взаимодействие с другими свойствами
-
flex-basis: 0
= Не будет показывать элемент, если не установленоflex-grow
—> Размер устанавливается на 0, пока не начнется рост -
flex-shrink: 0
= Не позволяет Элементу уменьшаться до размераflex-basis
. -
flex-grow
не обязательно указывать
= Еслиflex-basis
> Текущиеwidth
/height
&& Элементу не нужно расти за пределы размераflex-basis
—>flex-basis
иногда можно перепутать сflex-grow
. -
Доступное пространство не позволяет использовать размер
flex-basis
= Элемент уменьшается в соответствии сflex-shrink
/default shrinking -
Доступное пространство увеличивается && Элемент задал
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
.
Значения по умолчанию
- Отставить 3-е значение:
flex-basis
=flex-basis
установлен на 0px по умолчанию —> (в отличие от того, какflex-basis
установлен наauto
по умолчанию без свойстваflex
)**.
Пример: flex: 1 0 auto
= расти со скоростью 1, не уменьшаться, и использовать width
как flex-basis
.
- Отставить 2-е значение:
flex-shrink
=flex-shrink
установлено на1
—> То же, что и обычноеflex-shrink
по умолчанию.
Пример: flex: 0 300px
= Не увеличивать && flex-basis: 300px
- Отставить оба 2-ое && 3-е значения:
flex-shrink
&flex-basis
= По умолчанию:flex-basis: 0px
&&flex-shrink: 1
.
Пример: flex: 1;
= Только устанавливает flex-grow: 1
Значения: Ярлыки ключевых слов
-
flex: auto
=flex-grow: 1
,flex-shrink: 1
,flex-basis: auto
—> Увеличивается & Уменьшается & Сохраняет начальный размер =width
-
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! 🤳
С любовью,
Анжелина