Основные понятия flexbox
Содержание:
Контейнер
Блок, который хранит в себе дочерные элементы, которые нужно позиционировать. Контейнер обрабатывает элементы внутри себя, без вложенности. Внуки (Дети детей контейнера) уже не будут похожи на бабушку-контейнер. Только дети
Запомни, это важно
Его инициализация происходит следующим образом:
flex-direction
отвечает за направление элементов и устанавливает основную ось, таким образом, определяя как будут отображаться элементы внутри контейнера.
- (по умолчанию): слева направо в ltr; справа налево в rtl
- : справа налево в ltr; слева направо в rtl
- : то же, что и строка, но сверху вниз
- : тот же, что и в обратном порядке, но снизу вверх
Всё просто — вверх, вниз, вправо, влево
flex-wrap
По умолчанию элементы flex будут стараться помещаться в одной строке. Вы можете изменить это и позволить элементам обернуть по мере необходимости с этим свойством.
- (по умолчанию): все элементы flex будут находиться на одной строке.
- : гибкие элементы будут перенесены на несколько строк, сверху вниз.
- : элементы flex будут перенесены на несколько строк снизу вверх.
Перенос элементов — это ТАК просто!
flex-flow
Это сокращенное свойство, которое определяет основную и поперечную оси контейнера. Применяется к контейнеру. Значение по умолчанию — .
justify-content
Это свойство определяет выравнивание вдоль основной оси. Это помогает распределить дополнительное свободное пространство, оставшееся после того, как все дочерние элементы достигли максимального размера. Он также оказывает некоторый контроль над выравниванием элементов, когда они переполняют линию.
(по умолчанию): элементы позиционируются вначале контейнера.
: элементы позиционируются в конце контейнера.
: элементы центрируются вдоль контейнера.
: элементы равномерно распределены по контейнеру; первый элемент находится вначале контейнера, последний — в конце.
: элементы равномерно распределены по контейнеру с равным пространством вокруг них
Обратите внимание, что расстояния визуально не равны, поскольку все элементы имеют одинаковое пространство с обеих сторон.
: элементы распределяются так, что расстояние между любыми двумя элементами (и пространство до краев) равно.. Выравнивание вдоль основной оси
Выравнивание вдоль основной оси
align-items
Это свойство определяет поведение по умолчанию для того, как элементы располагаются вдоль поперечной оси в контейнере.
- : элементы выравниваются по верхнему краю контейнера.
- : элементы выравниваются по нижнему краю контейнера.
- : элементы центрированы по вертикали.
- : элементы выравниваются по собственному базовому выравниванию.
- (по умолчанию): элементы растягиваются, чтобы заполнить контейнер.
Вертикальное выравнивание — не проблема!
align-content
Это свойство выравнивает контейнер внутри, когда имеется дополнительное пространство, подобно тому, как выравнивает отдельные элементы на основной оси.
Примечание. Это свойство не действует, когда имеется только одна строка элементов flex.
- : элементы выравниваются по верхнему краю контейнера.
- : элементы выравниваются по нижнему краю контейнера.
- : элементы выравниваются по центру контейнера.
- : элементы позиционируются равномерно, первая строка находится в начале контейнера, последняя — в конце.
- : элементы позиционируются равномерно, распределенные с равным пространством, вокруг каждого ряда.
- (по умолчанию): элементы растягиваются вдоль контейнера.
Как использовать Flexbox
(О выборе между Grid и Flexbox можно почитать в статье «Grid — для макетов, Flexbox — для компонентов», — прим. ред. Techrocks).
Допустим, у нас есть документ, в котором по порядку идут три одинаковых элемента-потомка какого-нибудь родительского блока. Они располагаются друг за другом вертикально.
Но что, если нам нужно расположить их в ряд?
Здесь нам на помощь приходит Flexbox. Этот функционал CSS позволяет располагать элементы с учетом строк и столбцов, а также задавать промежутки между ними (пространство вокруг них).
Для начала давайте создадим родительский блок с тремя элементами-потомками внутри него.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position and Flexbox</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="parent">
<div class="child-one"></div>
<div class="child-two"></div>
<div class="child-three"></div>
</div>
</body>
</html>
CSS:
/* Flexbox container */
.parent {
background-color: #00AAFF;
width: 300px;
height: 300px;
display: flex;
}
.child-one {
background-color: rgb(116, 255, 116);
width: 300px;
height: 300px;
}
.child-two {
background-color: rgb(248, 117, 117);
width: 300px;
height: 300px;
}
.child-three {
background-color: rgb(255, 116, 232);
width: 300px;
height: 300px;
}
Обратите внимание, что для класса установлено свойство. Благодаря этому наши элементы-потомки расположились в ряд
Это расположение, принятое во Flexbox по умолчанию.
Давайте посмотрим другие варианты расположений.
Как располагать элементы при помощи Flexbox
flex-direction
Свойство служит для указания главной оси, по которой будут располагаться элементы. То есть, оно определяет, как элементы будут отображаться на экране: горизонтально или вертикально.
Свойству назначают значение row, если элементы нужно расположить в ряд, слева направо (это значение по умолчанию):
Значение позволяет расположить элементы в виде столбцов, т. е. вертикально:
Значение работает так же, как , но порядок элементов будет обратным. Первый элемент станет последним, а последний — первым. расположение элементов будет противоположным тому, что было бы при значении :
Аналогично, значение служит для расположения элементов вертикально, но в обратном порядке.
justify-content
Это свойство определяет выравнивание элементов вдоль горизонтальной оси контейнера.
Если задано значение , элементы будут располагаться по центру контейнера.
При значении — в начале страницы.
При значении — в конце страницы.
Значение позволяет распределить элементы по ширине flex-блока. Элементы будут разделены промежутками. Расстояния между каждой парой соседних элементов будут одинаковыми, а пустые пространства перед первым элементом и после последнего элемента будут равны половине пространства между парами элементов.
Вы видите, что пространства между , и одинаковые, а пространства перед и после — меньше.
Значение максимизирует пространство между элементами, прижимая первый и последний к началу и концу контейнера по главной оси.
Значение дает эффекта, похожий на эффект от значения , с той разницей, что пространство от краев контейнера до первого и последнего элементов будет таким же, как и пространство между элементами.
align-items
Свойство аналогично свойству , но служит для выравнивания элементов по вертикали. Работает только с фиксированной высотой контейнера.
Значение позволяет центрировать элементы по вертикали.
При значении элементы выравниваются по верхнему краю страницы.
При значении — выравниваются по нижнему краю.
Теперь вы знаете основы Flexbox.
Как выравнивать элементы по центру экрана
Свойства Flexbox можно использовать вместе. Например, если мы хотим расположить элементы по центру и по горизонтали, и по вертикали, мы можем задать и , и .
min-width имеет значение
Возможно, ты думаешь, что несложно заставить все flex-элементы внутри flex-контейнера сжиматься, для того чтобы уместить контент. Наверняка, если ты укажешь flex-shrink: 1 на элементах, они так и будут себя вести, правда?
Может, пример.
Скажем, у тебя есть часть DOM, которая отображает книгу на продажу и кнопку чтобы ее купить.
Ты разместил все с помощью flexbox и все хорошо.
(Поскольку ты хочешь кнопку «Купить» справа — даже для очень коротких названий — ты, будучи умным, указал margin-left: auto)
Название книги довольно длинное, поэтому оно использует столько пространства сколько может и затем переходит на следующую строку. Ты счастлив, жизнь прекрасна. Ты блаженно отправляешь свой код в продакшн, с уверенностью, что он выдержит все.
И потом получаешь неприятный сюрприз. Совсем не хорошего рода.
Некий дурень, много о себе возомнивший, написал книгу с длинным словом в названии.
Все сломано!
Если красная граница обозначает ширину смартфона, и ты скрываешь переполнение (overflow: hidden), ты только что потерял свою кнопку «Купить». Твой коэффициент конверсии — как и эго бедного автора — будет страдать.
(Примечание: к счастью, там где я работаю, есть хорошая QA команда, которая наполнила нашу базу данных разнородным текстом, наподобие такого. В частности, именно эта проблема побудила меня прочитать спецификацию.)
Оказывается, такое поведение происходит из-за того, что min-width элемента описания изначально установлена в auto, что в данном случае равняется ширине слова Electroencephalographically (электроэнцефалографически). Flex-элементу буквально не разрешается быть уже чем это слово.
Решение? Переопределить эту проблемную минимальную ширину min-width: auto установив min-width: 0, указывая flexbox’у, что этот элемент может быть уже, чем содержимое внутри него.
Теперь за управление текстом внутри элемента отвечаешь ты. Я предлагаю перенести слово. Таким образом, твой CSS будет выглядеть так:
Результат будет таким:
Опять же, min-width: 0 не какой-то хак для обхода нелепости, это .
В следующем разделе, я вернусь к тому, что кнопка «Купить» совсем не 80 пикселей по ширине, как я довольно ясно ей сказал.
Элементы контейнера
Теперь перейдем к элементам контейнера, они также имеют свои свойства, которые влияют на позиционирование и отображение внутри контейнера.
order
По умолчанию элементы отображаются «как есть». Однако свойство управляет порядком, в котором они отображаются в контейнере.
Боярскому элементу — боярское место
flex-grow
Это свойство определяет способность для элемента увеличиваться, если это необходимо. Он принимает значение, которое служит пропорцией. Он определяет, какое количество свободного пространства внутри контейнера он должен занимать.
Если все элементы имеют равный 1, оставшееся пространство в контейнере будет равномерно распределено для всех элементов. Если из них имеет значение 2 — он занимает вдвое больше места, чем другие. (или будет пытаться, хотя бы)
Хорошего элемента мало не бывает
flex-shrink
Это свойство определяет способность элемента при необходимости уменьшаться.
Отрицательные числа недействительны.
flex-basis
Это определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т.д.) или ключевое слово.
Ключевое слово значит «посмотреть мои свойства ширины или высоты» (которое временно выполнялось ключевым словом до тех пор, пока оно не устарело). Ключевое слово означает «размер основывает на основе содержимого элемента» пока не очень хорошо поддерживается, поэтому его трудно проверить, что делают его , и . Поэтому стоит удержаться от использования этих ключевых слов.
Если установлено значение , дополнительное пространство вокруг содержимого не учитывается. Если установлено значение , дополнительное пространство распределяется на основе его значения гибкого роста.
flex
Это сокращение для , и . Второй и третий параметры ( и ) являются необязательными. По умолчанию — .
Рекомендуется использовать это сокращенное свойство, а не устанавливать индивидуальные свойства. Короткая комбинация задает другие значения разумно.
align-self
Это свойство позволяет переопределить выравнивание по умолчанию (или значение, указанное ) для отдельных элементов.
За основу статьи взята информация из CSS-Tricks / A Complete Guide to Flexbox
Привет, Flex, наконец-то!
На улице 2018 год и поддержка Flex’ов уже идет полным ходом — 97.66% браузеров поддерживают их, за данными сайта ! А это значит то, что жизнь верстальщика стала намного проще: браузер посетителя поумнел и создание сайта теперь проще, лучше и изысканнее.
Почему Flex?
- Все блоки очень легко делаются адаптивными. Элементы могут растягиваться и сжиматься по заданным правилам, занимая нужное пространство.
- Выравнивание по вертикали и горизонтали, базовой линии текста работает шикарно.
- Расположение элементов можно поменять с помощью CSS, адаптивная верстка становится проще!
- Элементы могут автоматически выстраиваться в несколько строк/столбцов, занимая все предоставленное место в контейнере.
- Flexbox адаптирован под написание справа-налево (right-to-left), в отличие от привычного нам (left-to-right). В нем есть понятие начала и конца. В браузерах с локалью все элементы будут автоматически расположены в реверсном порядке.
- Синтаксис CSS правил очень прост и осваивается довольно быстро.
Нужно что же, начнем?
Flexbox CSS
На смену всем известным флоатам приходит Flexbox CSS. Он не был так широко известен, несмотря на то, что появился еще в 2011 году.
Поддержка этого свойства у браузеров на тот момент была минимальна, поэтому не каждый решался использовать это нововведение на своих сайтах.
Сейчас на данный момент ситуация кардинально изменилась. Flexbox CSS поддерживается всеми современными браузерами и не только. Верстальщики, которые перешли с флоатов на флексы почувствовали, что верстать стало гораздо быстрее и, что самое главное, приятнее.
В чем преимущества Flex?
Прежде всего то, что многие популярные задачи можно было решить буквально в пару строчек CSS-кода, с использованием минимальной разметки HTML.
Давайте рассмотрим пример:
В этом примере мы видим родительский блок с классом box и дочерние элементы, которые окрашены в зеленый цвет и имеют ширину/высоту 100px. Чтобы поставить их в ряд, необходимо всего лишь установить
Если нам необходимо установить блоки по центру, то мы можем установить здесь же. В случае с float, такая реализация была бы невозможна (без костылей).
Если наша цель растянуть один единственный блок и заполнить его по всей ширине контента, то мы можем добавить класс child для конкретного блока, например, четвертого и установить для него свойство
Чтобы ознакомиться со всеми свойствами Flexbox CSS, вы можете воспользоваться наглядной интерактивной шпаргалкой по всем свойствам. Обязательно держите ее под рукой, когда будете верстать сайт.
Основные свойства flex-контейнера. Главная и поперечная ось.
Одним из основных понятий в fleхbox являются оси.
- Главной осью flex-контейнера является направление, в соответствии с которым располагаются все его дочерние элементы.
- Поперечной осью называется направление, перпендикулярное главной оси.
Главная ось в ltr локали по умолчанию располагается слева направо. Поперечная – сверху вниз. Направление главной оси flex-контейнера можно задавать, используя базовое css свойство flex-direction.
flex-direction – направление главной оси
Доступные значения flex-direction:
- row (значение по умолчанию) : слева направо (в rtl справа налево)
- row-reverse: справа налево (в rtl слева направо)
- column: сверху вниз
- column-reverse: снизу вверх
justify-content – выравнивание по главной оси.
Css свойство justify-content определяет то, как будут выровнены элементы вдоль главной оси.
Доступные значения justify-content:
- flex-start (значение по умолчанию) : блоки прижаты к началу главной оси
- flex-end: блоки прижаты к концу главной оси
- center: блоки располагаются в центре главной оси
- space-between: первый блок располагается в начале главной оси, последний блок – в конце, все остальные блоки равномерно распределены в оставшемся пространстве.
- space-around: все блоки равномерно распределены вдоль главной оси, разделяя все свободное пространство поровну.
align-items – выравнивание по поперечной оси.
Css свойство align-items определяет то, как будут выровнены элементы вдоль поперечной оси.
Доступные значения align-items:
- flex-start: блоки прижаты к началу поперечной оси
- flex-end: блоки прижаты к концу поперечной оси
- center: блоки располагаются в центре поперечной оси
- baseline: блоки выровнены по их baseline
- stretch (значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываются min-width/max-width, если таковые заданы.
СSS свойства flex-direction, justify-content, align-items должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
Демо основных свойств flex-контейнера
Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.
Значение column
Использование flex-direction: column изменяет распределение флекс-элементов так, чтобы они располагались в колонку.
<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: flex-start;
background: beige;
height: 100vh;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
}
body {
margin: 0;
}
</style>
<div class=»container»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3</div>
</div>
Пример 1. Как сделать фотогалерею на Флексбокс
Разместить фотографии по строкам и столбцам на Флексбокс гораздо проще, чем многим кажется. Рассмотрим простую сетку:
<main class="gallery"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> </main>
У нас есть main.gallery и 10 изображений в нем. Убедимся, что main.gallery растягивается на весь доступный экран:
.gallery {
min-height: 100vh
}
Кое-что об изображениях
По умолчанию все изображения inline-block элементы. У них есть ширина и высота. Они выстроятся в линию (только если они не слишком большие и могут все поместиться)
На старт
Сейчас наша галерея будет выглядеть следующим образом:
Размеры всех 10 изображений остались нетронутыми. При необходимости картинки переместятся на вторую строку. Послушные ребята =)
А теперь, на сцену выходит Флексбокс:
.gallery {
display: flex
}
С этого момента поведение изображений изменилось. Из inline-block элементов они стали flex-items. В результате применения Флексбокс к .gallery все картинки уместились в одну линию. Да еще и растянулись по вертикали, вот так:
Картинки теперь уместились все в одну линию, да еще и растянулись по вертикали. Жалкое зрелище =(
Все это результат стандартного поведения Флексбокс:
- Сплющить все дочерние элементы в одну линию и никуда их не переносить. Не самое лучшее решение для галереи, так что изменим его:
.gallery {
flex-wrap: wrap
}
Это разрешит перенос элементов на другую строку как и полагается
Изображения перенесены
2. Теперь картинки располагаются в несколько линий. Но они все еще растянуты по вертикали и это определенно не характерно для изображений в галерее. Свойство align-items флекс-контейнера по умолчанию равно значению stretch
.align-items: stretch
Изменим его:
.gallery {
...
align-items: flex-start
}
Это защитит картинки от растягивания.
Кроме того они выровнены относительно начала вертикальной оси:
Теперь в нашей галерее неискаженные изображения. Почти такие же как и были, пока мы не подключили флексбокс
Наша мощная флексбокс-галерея готова.
Преимущества использования Флексбокс
Сейчас преимущества использования Флексбокс не особо заметны, ведь тот же самый вид был и до его подключения.
Кроме легко получаемой адаптивности, преимущество флексбокс заключается в возможностях выравнивания. Флекс-контейнер .gallery имеет несколько свойств для настройки выравнивания:flex-direction: row ,justify-content: flex-startиalign-items: flex-start. Разметку галереи можно легко поменять поигравшись со следующим значением:
.gallery {
...
justify-content:center;
}
Теперь изображения идеально отцентрованы по горизонтали
Кроме того, картинки могут быть отцентрованы и по горизонтали и по вертикали .gallery.
.gallery {
...
justify-content:center;
align-items: center;
}
А теперь изображения выровнены не только горизонтально, но и вертикально
Флексбокс предоставляет много вариантов выравнивания. Играйтесь со значениями, как сочтете нужным.
Можете посмотреть на действующую Флексбокс галереюздесь.
Что такое Flexbox?
Flexbox – это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо для случаев адаптивности страницы под различные размеры экрана и для различных устройств.
Используя flexbox, контейнер и его дочерние элементы могут быть расположены в любом направлении: влево, вправо и даже вверх или вниз. Вы можете выбрать нужный порядок элементов на странице и упорядочить их, выровнять содержимое по ширине справа налево с помощью одного свойства, и даже добавить любое количество столбцов в разметку страницы своего сайта. Размер блоков также является гибким, поскольку элементы могут увеличиваться, чтобы занять неиспользуемое пространство или сжиматься, чтобы не допустить переполнения.
На данный момент flexbox поддерживается практически всеми современными браузерами, включая Android и iOS.
Когда использовать Flexbox при верстке макета
В одной из предыдущих статей мы писали об использовании сеток в качестве метода для респонсивного дизайна. Хотя с помощью Flexbox технически можно сверстать полный макет для сайта, он не предназначен исключительно для этой цели. Скорее, он лучше подходит для стилизации отдельных контейнеров, таких как контейнер основного контента, боковая панель (сайдбар), хедер и другие подобные разделы. Все же сетки лучше подходят для создания всего макета.
Разница заключается в том, как flexbox взаимодействует с браузерами, в которых загрузка страницы происходит постепенно. Сначала контент растягивается горизонтально, чтобы заполнить весь экран. По мере загрузки всех остальных контейнеров горизонтальное отображение динамически настраивается и сжимается для заполнения всей ширины экрана, чтобы включить окружающие элементы.
Другими словами пользователь на доли секунды увидит совсем не тот макет, который планировался. Но после полной загрузки страницы все, конечно же, выравнивается.
Контейнеры, дочерние элементы и Flex
Прежде чем мы начнем писать код CSS с использованием flexbox, есть некоторые важные концепции, с которыми в первую очередь нужно ознакомиться:
- flexbox – контейнер становится flexbox после того, как подключается свойство со значением или
- flex item – дочерний элемент в flexbox
- главная ось (main axis) – это основная ось, вдоль которой выравниваются элементы
- перекрестная ось (cross axis) – ось, перпендикулярная главной оси. Также называется поперечной осью
- главное начало/главный конец (main-start/main-end) – флекс элементы помещаются в контейнер, который начинается со стороны главного начала, и заканчивается к главному концу
- перекрестное начало и конец (cross start/end) – флекс линии заполняются items (элементами) и помещаются в контейнер, который начинается со стороны перекрестного начала флекс контейнера и идет к перекрестному концу
- свойство основного размера (main size) – ширина или высота флекс элемента, в зависимости от того, что находится в основном измерении главной оси, является основным размером элемента. Свойство основного размера элемента flex – это свойство ширины или высоты, в зависимости от того, что находится в основном измерении
- свойство перекрестного размера (cross size) – ширина или высота флекс элемента, в зависимости от того, что находится в поперечной оси измерении, является перекрестным размером элемента. Свойство перекрестного размера зависит от ширины или высоты, которое находится в поперечном измерении
Графическое описание важных концепций для flexbox в CSS3
В CSS есть определенные свойства, на которые не влияет свойство flexbox, поскольку они фактически не делают контейнеры блоками:
column-* float clear vertical-align ::first-line и ::first-letter
Создание HTML5 контейнера
Теперь мы можем начать строить макет, используя flexbox. Для этого создайте костяк html-страницы (или же в php, если вы используете CMS).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Заголовок страницы</title>
</head>
<body>
</body>
</html>
Создайте родительский контейнер внутри :
<div class="content"> </div>
Внутри этого контейнера вы можете добавить любой контент.
В качестве теста я создам три блока с небольшой информацией, и блок с основным контентом под ними.
<div class="content"> <div class="blok">Блок информации №1</div> <div class="blok">Блок информации №2</div> <div class="blok">Блок информации №3</div> <article>Здесь основной контент.</article> </div>
Теперь, чтобы придать этому костяку некоторых красок, добавим несколько основных стилей CSS (вы можете это сделать с помощью отдельного подключаемого файла css стилей, или же включить эти стили в тег в разделе ).
