ЛЕКЦИЯ
Тема: «Модуль Flexbox CSS»
План лекции
1. Что такое Flexbox?
2. Flex-контейнер
3. Flex-элементы
4. Свойства для родителя (Flex-контейнера)
5. Свойства для первых дочерних элементов (flex
элементов)
1.
Что такое Flexbox?
Верстка с Flexbox дает простые решения некогда
непростых задач. Например, когда нужно выровнять элемент по вертикали, или
прижать подвал к низу экрана, или просто вставить несколько блоков в один ряд,
так чтобы они занимали все свободно пространство. Подобные задачи решаются и
без flex. Но как правило, эти решения больше похожи на приемы с использованием
css не по назначению. Тогда как с flexbox такие задачи решаются именно так, как
задумывает flex-модель.
CSS Flexible Box Layout Module (CSS модуль для макетов
с гибкими блоками), коротко flexbox (Флексбокс), создана, чтобы убрать
недостатки при создании самых разных HTML конструкций, в том числе
адаптированных под разную ширину и высоту, и сделать верстку логичной и
простой.
Flexbox позволяет элегантно контролировать самые
разные параметры элементов внутри контейнера: направление, порядок, ширину,
высоту, выравнивание вдоль и поперек, распределение свободного места,
растяжение и сжатие элементов.
Основные
преимущества flexbox:
Все блоки очень легко делаются «резиновым», что уже
следует из названия «flex». Элементы могут сжиматься и растягиваться по
заданным правилам, занимая нужное пространство.
Выравнивание по вертикали и горизонтали, базовой линии
текста работает великолепно.
Расположение элементов в html не имеет решающего
значения. Его можно поменять стилями.
Элементы могут автоматически выстраиваться в несколько
строк/столбцов, занимая все предоставленное место.
Синтаксис CSS Flexbox правил очень прост и осваивается
довольно быстро.
Flexbox CSS состоит из двух частей, а именно Контейнер
и Элементы. Потому и css свойства тоже делятся на две части: для контейнеров и
для элементов.
Чтобы начать работу с Flexbox достаточно лишь
установить свойство display со значением flex или inline-flex.
<style>
.flex{ display: flex;
}
</style>
<div
class="flex">
<div
class="item">Блок 1</div>
<div
class="item">Блок 2</div>
</div>
После применения создаются две оси, внутри контейнера:
Главная и Поперечная.
- Flex-контейнер
Flex-контейнер устанавливает новый гибкий способ
форматирования его содержимого. Flex-контейнер не является блочным контейнером,
поэтому для дочерних элементов не работают такие CSS-свойства, как float,
clear, vertical-align. Также, на flex-контейнер не оказывают влияние свойства
column-*, создающие колонки в тексте и псевдоэлементы ::first-line и
::first-letter.
Модель flexbox-разметки связана с определенным
значением CSS-свойства display родительского html-элемента, содержащего внутри
себя дочерние блоки. Для управления элементами с помощью этой модели нужно
установить свойство display следующим образом:
.flex-container {
/*генерирует
flex-контейнер уровня блока*/
display: flex;
}
.flex-container {
/*генерирует
flex-контейнер уровня строки*/
display: inline-flex;
}
После установки данных значений свойства каждый
дочерний элемент автоматически становится flex-элементом, выстраиваясь в один
ряд (вдоль главной оси). При этом блочные и строчные дочерние элементы ведут себя
одинаково, т.е. ширина блоков равна ширине их содержимого с учетом внутренних
полей и рамок элемента.
Если родительский блок содержит текст или изображения,
они становятся flex-элементами. Текст выравнивается по верхнему краю
блока-контейнера, а высота изображения становится равной высоте блока, т.е. оно
деформируется.
- Flex-элементы
Flex-элементы – блоки, представляющие содержимое
flex-контейнера в потоке. Flex-контейнер устанавливает новый контекст
форматирования для своего содержимого, который обуславливает следующие
особенности:
1) Для flex-элементов блокируется их значение свойства
display. Значение display: inline-block; и display:
table-cell; вычисляется в display: block;.
2) Пустое пространство между элементами исчезает: оно
не становится своим собственным flex-элементом, даже если межэлементный текст
обернут в анонимный flex-элемент. Для содержимого flex-элемента невозможно
задать собственные стили, но оно будет наследовать их (например, параметры
шрифта) от flex-контейнера.
3) Абсолютно позиционированный flex-элемент не
участвует в компоновке гибкого макета.
4) Поля margin соседних flex-элементов не
схлопываются.
5) Процентные значения margin и padding вычисляются от
внутреннего размера содержащего их блока.
6) margin: auto; расширяются, поглощая дополнительное
пространство в соответствующем измерении. Их можно использовать для
выравнивания или раздвигания смежных flex-элементов.
7) Автоматический минимальный размер flex-элементов по
умолчанию является минимальным размером его содержимого, то есть min-width:
auto;. Для контейнеров с прокруткой автоматический минимальный размер обычно
равен нулю.
- Свойства для Родителя (flex
контейнерА)
Свойство display:
Назначив свойству display значение flex, объявляем браузеру,
что будет работать с этой моделью стилей. Модель подразумевает применение flex
свойств только для первых потомков внутри контейнера, то есть их дети будут
иметь стандартное значение, например, если это div, то стандартное значение
будет block.
Как уже было сказано выше, flex значение можно задать
двумя способами:
flex – растягивает родителя на всю свободную ширину, как
бы мы задали блоку 100%-ю ширину. Так же в начале и конце применяются переносы,
что делает контейнер абсолютно отделенным блоком.
inline-flex – с внешней части обтекается другими элементами, но
внутренние блоки работают аналогично предыдущему значению.
Собственно, их разница только в том, как они
взаимодействуют с окружающими элементами, что иногда играет очень важную роль.
Задаются они следующим образом:
display:flex
display:inline-flex
Направление главной оси: flex-direction
Задает направление главной и поперечной оси, в
зависимости от выбранного значения.
row – слева-направо (стандартное значение)
column – сверху-вниз
row-reverse – справа-налево
column-reverse – снизу-вверх
Управление многострочностью flex-контейнера:
flex-wrap
Этот элемент задает перенос элементов, которые не
помещаются в контейнере. По умолчанию flex-элементы попытаются втиснуться в одну
линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого
свойства. Здесь играет роль и направление, в котором располагаются новые линии:
nowrap – установлен по умолчанию. С ним все вложенные
элементы изначально стоят в один ряд. Если из-за их размеров и количества они
не помещаются в контейнере, то никаких переносов осуществляться не будет.
wrap – Включает перенос на следующий ряд, в том случае,
если они не помещаются в контейнер.
wrap-reverse – Делает тоже самое, что и предыдущее свойство wrap,
только переворачивается весь массив DOM документа (внешне, но html остается
таким каким был до этого).
Краткая запись направления и многострочности:
flex-flow
Применяется к родительскому элементу flex-контейнера.
Это сокращенная форма свойств flex-direction и
flex-wrap, которые вместе определяют главную и поперечную оси flex-контейнера.
По умолчанию задается значение row nowrap:
Выравнивание по главной оси: justify-content
Свойство выравнивает все элементы по основной оси:
flex-start – направление элементов совершается с начала в конец,
если контейнер рассчитан на 16 элементов, а мы имеем 15, то место на него
остается пустым. (Значение установлено по умолчанию)
flex-end – аналогично предыдущему, только направление
элементов будет задаваться, начиная с конца. Точно так же в начале может
остаться свободное место.
center – выставляет все элементы по центру – соответственно
с лева и права может остаться свободное место.
space-between – прижимает все элементы к краям контейнера, а
свободное место между элементами, которые находятся посредине распределяется
равномерно.
space-around
– все свободное место распределяется
между элементами равномерно, кроме крайних элементов. Свободное место по краям
в два раза меньше, чем свободное место между центральными элементами.
space-evenly – Свободное место между элементами распределяется
равномерно, даже для крайних элементов. Значение очень похоже на значение
space-around, но разница заключается в расстоянии у крайних элементов до краев
контейнера. Оно абсолютно равно тому расстоянию, которое имеют средние элементы
между собой.
Выравнивание по поперечной оси
align-items
Свойство очень похоже на align-content, только если в
упомянутом мы работам по поперечной оси, то в align-content мы работаем по
главной оси.
Это замечательное свойство выравнивает ряды
(контейнеры), проходящие по поперечной оси. Таким образом, очень удобно прижать
определенные блоки к низу или верху линии (родителя) либо центрировать все
блоки относительно их размеров:
stretch – используется по умолчанию, ряды (контейнеры)
растягиваются полностью, заполняя строку, т.е. высота у всех контейнеров
выравнивается (становится одинаковой). Таким образом, все элементы кажутся
одинаковыми по высоте. Наибольший элемент в ряде, задает высоту всем остальным
flex-start – все
элементы принимают свой родной размер, но при этом прижимаются к верху, из-за
чего внизу блока может остаться место.
flex-end – все элементы принимают свой родной размер, но при
этом элементы прижимаются к низу. Вверху остается пустое место.
center – все элементы выравниваются по центру, вверху и
внизу остается свободное место.
baseline – все элементы выравниваются по базовой линии текста.
- Свойства для первых
дочерних элементов
(flex элементов)
Порядок отображения flex-элементов: order
Cвойство, которое позволяет менять местами элементы.
Ранее такое можно было сделать лишь с помощью JavaScript, но при этом нужно
было очень даже помучиться.
По умолчанию: order: 0
Если назначить одному элементу order: 1, а все
остальные (по умолчанию) будут иметь значение order: 0, то сначала будут
отображаться нулевые элементы и только потом элемент со значением 1.
На рисунке на оранжевых блоках написаны значения
свойства order. И в зависимости от значения этого свойства элементы
располагаются следующим образом:
Выравнивание по поперечной оси отдельных
элементов: align-self
Свойство определяет выравнивание отдельно взятого
flex-блока по поперечной оси
auto – используется align-items от родительского элемента (по
умолчанию);
flex-start – от начала поперечной оси;
flex-end – от конца поперечной оси;
center – по центру;
baseline – по базовой линии;
stretch – растягивается, занимая все пространство по высоте.
На рисунке показано применение свойства align-self для
третьего элемента
Коэффициент роста: flex-grow
Это свойство определяет способность flex элемента
растягиваться в случае необходимости. Оно принимает значение от нуля, которое
служит пропорцией. Это свойство означает, какое количество доступного пространства
внутри гибкого контейнера должен занимать элемент.
Если для всех элементов flex-grow установлено значение
1, оставшееся пространство в контейнере будет равномерно распределено между
всеми дочерними элементами. Если один из дочерних элементов имеет значение 2,
этот элемент займет в два раза больше места, чем остальные (или попытается, по
крайней мере).
.item {
flex-grow: <число>; /* по умолчанию 0 */
}
Отрицательные числа не поддерживаются.
Коэффициент сжатия: flex-shrink
Это свойство определяет способность гибкого элемента
сжиматься при необходимости.
.item {
flex-shrink: <число>; /* по умолчанию 1 */
}
Это свойство противоположное свойству flex-grow. Если
со свойством flex-grow мы заставляли блок увеличиться и занять свободное место,
то в случае с flex-shrink мы уменьшаем блоки, если задаем большое
значение.
По умолчанию flex-shrink: 1;
Вместе если вместе с
свойством flex-shrink нужно использовать flex-basis, который
задает базовый размер элемента. Если вы его не укажете, то работать свойство flex-shrink не
будет.
Теоретический пример: если у нас будет контейнер
размерностью 800 пикселов, а элементы будут иметь flex-basis: 200px,
а flex-shrink будет иметь стандартное число 1, то каждый блок будет
иметь свои базовые 200px, если же уменьшить контейнер до 600px, то элементы
естественно тоже уменьшатся и будут равны по 150px. Если одному из элементов
назначить значение flex-shrink: 0, этот элемент получит свой базовый
размер 200px, а остальные уже равномерно распределят между собой свободное место.
Правда не стоит удивляться, если размеры блоков как-то
могут не сходиться с заданным вами базовым размером, так как нужно
учитывать padding (если стоит 15px на левый и правый бок, то элемент будет иметь размер
230px) и margin значения.
Отрицательные числа у свойства не поддерживаются.
Базовый размер отдельно взятого flex-элемента:
flex-basis
Это свойство определяет размер элемента по умолчанию
перед распределением оставшегося пространства. Это может быть длина (например,
20%, 5rem и т.д.) Или ключевое слово. Ключевое слово auto означает «смотри на
мое width или height свойство». Ключевое слово content означает «размер на
основе содержимого элемента» – это ключевое слово все еще не очень хорошо
поддерживается, так что трудно проверить что для него используется max-content,
min-content или fit-content.
.item {
flex-basis: <значение> | auto; /* по умолчанию auto */
}
Если установлено значение 0, дополнительное пространство
вокруг содержимого не учитывается. Если установлено значение auto,
дополнительное пространство распределяется в зависимости от его flex-grow
значения.
Задание гибких размеров одним свойством: flex
Это сокращение для использования flex-grow, flex-shrink
и flex-basis вместе. Второй и третий параметры (flex-shrink и flex-basis)
являются необязательными. По умолчанию это 0 1 auto.
.item {
flex: none | [ <'flex-grow'>
<'flex-shrink'>? || <'flex-basis'> ]
}
Рекомендуется использовать это сокращенное свойство, а
не устанавливать отдельные свойства. Это сокращение разумно устанавливает
другие значения.
Свойство
margin: auto по вертикали
При задании родителю свойства display: flex привычное
всем выравнивание по горизонтали через margin:auto работает и для
вертикали.
Пример.
.my-flex-container {
display: flex;
height: 300px; /* Значение высоты родителя */
}
.my-flex-block {
width: 100px; /* Значение ширины дочернего элемента*/
height: 100px; /* Значение высоты дочернего элемента*/
margin: auto; /* Блок отцентрирован по вертикали и горизонтали */
}
КОНТРОЛЬНЫЕ
ВОПРОСЫ
1.
Назовите основные
преимущества модуля flexbox css.
2.
Что такое
flex-контейнер, flex-элементы, главная ось, поперечная ось?
3.
Назовите назначение
свойства display и его значений.
4.
Назовите
назначение свойства flex-direction и его значений.
5.
Какое свойство
управляет многострочностью flex-контейнера? Дайте ему характеристику.
6.
Какое свойство
задает выравнивание по главной оси? Дайте ему характеристику.
7.
Какое свойство
задает выравнивание по поперечной оси? Дайте ему характеристику.
8.
Как менять
порядок отображения flex-элементов?
9.
Как задать
выравнивание по поперечной оси отдельных элементов?
10. Назовите назначение свойства flex-grow и его значений.
11. Назовите назначение свойства flex-shrink и его
значений.
12. Как задается базовый размер отдельно взятого
flex-элемента?
13. Возможности свойства margin: auto в css flex.