×Закрыть

Обзор CSS Flexbox layout — технологии для расположения блоков на HTML-странице

Flexbox разработан для оптимизации раскладки элементов, в отличие от float. Он облегчает выравнивание элементов по горизонтали и вертикали, смену направления и порядок отображения элементов, позволяет растягивать блоки на всю высоту родителя или опускать их к нижнему краю.

В статье проведем краткое знакомство с технологией Flexbox. Решив ее использовать, приготовьтесь поменять свои привычные представления о выстраивании элементов в потоке. И дайте себе немного времени на адаптацию к новому подходу.

Что же такое Flexbox

С уверенностью можно сказать, что Flexbox призван помочь нам с некоторыми особо неприятными моментами CSS (например, вертикальное выравнивание). И в решении данного вопроса ему нет равных. Но порой разобраться в принципах работы этой технологии бывает сложно. Особенно если у вас не хватает опыта или вы совсем новичок.

Главная задача Flexbox — сделать слои гибкими, а работу с ними максимально простой. Идея гибкой (flex) разметки — позволить контейнеру менять ширину/высоту (и порядок) своих элементов, чтобы наилучшим образом заполнить доступное пространство (в основном для размещения на всех типах и размерах экранов). Flexbox контейнер расширяет элементы, чтобы заполнить свободное пространство, или сжимает их, чтобы избежать переполнения.

Так как Flexbox — это полноценный модуль, а не отдельное свойство, он содержит целый набор свойств.

Некоторые элементы предназначены для работы с родительским контейнером «flex-контейнер». А другие касаются дочерних элементов (известных, как «flex-элементы»).

Если обычная система компоновки основана на блочных и строковых направлениях, то Flexbox основан на «flex-flow направлениях».

Чтобы начать работать с Flexbox, нам нужно сделать наш контейнер flex-контейнером. Делается это так:

<div class="flex-container">
    <div class="box box-1">Item 1</div>
    <div class="box box-2">Item 2</div> 
    <div class="box box-3">Item 3</div> 
    <div class="box box-4">Item 4</div> 
</div>

.flex-container {
    display: flex;
}

Как можно заметить, элементы выстроились в ряд.

Flex-direction

У flex-контейнера есть две оси: главная ось и перпендикулярная ей.

По умолчанию все предметы располагаются вдоль главной оси: слева направо. Из-за этого блоки выровнялись в линию, когда мы применили свойство display:flex;

Свойство flex-direction позволяет вращать главную ось.

Важно, что свойство flex-direction: column не выравнивает квадраты по оси, перпендикулярной главной. Главная ось сама меняет свое расположение и теперь направлена сверху вниз.

Также существует еще несколько параметров для flex-direction: row-reverse и column-reverse.

.flex-container {
  display: flex;
  flex-direction: column-reverse;
}

.flex-container {
  display: flex;
  flex-direction: row-reverse;
}

Justify-сontent

Свойство justify-content: может принимать пять разных значений:

flex-start;
flex-end;
center;
space-between;
space-around.

Работу всех этих свойств можно посмотреть, вписав в пример ниже:

Если justify-content работает с главной осью, то align-items работает с осью, перпендикулярной главной оси.

Свойство также может принимать пять разных значений:

flex-start;
flex-end;
center;
stretch;
baseline;

Как показано в примере, свойства justify-content и align-items довольно легко объединять:

Align-self

Align-self позволяет выравнивать элементы по отдельности.

.flex-container {
  display: flex;
  min-height:100px;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.box-1 {
  width:50px;  
}
.box-2 {
  width:70px;
}
.box-3 {
  align-self:center;
  width:90px;
}
.box-4 {
  align-self:flex-end;
}

Flex-grow

Свойство определяет возможность элемента увеличиваться в размере при необходимости. Оно принимает безразмерное значение в качестве пропорции, которое определяет, какое количество свободного пространства внутри контейнера должен занимать элемент.

Если у всех элементов свойство flex-grow установлено в 1, то свободное пространство внутри контейнера будет равномерно распределено между всеми элементами. Если у одного из элементов значение установлено в 2, то элемент будет занимать в два раза больше пространства, чем остальные (по крайней мере попытается).

<div class="flex-container">
  <div class="box box-1">Item 1</div>
  <div class="box box-2">Item 2</div> 
  <div class="box box-3">Item 3</div> 
  <div class="box box-4">Item 4</div> 
</div>



.box-1 {
  flex-grow: 1;
}
.box-2 {
  flex-grow: 2;
}
.box-3 {
  flex-grow: 3;
}
.box-4 {
  flex-grow: 4;
}

Указывать отрицательные числа нельзя.

Flex-shrink

Это свойство определяет возможность элемента уменьшаться в размере, при необходимости.

.item {
  flex-shrink: <number>; /* по умолчанию 1 */
}

Указывать отрицательные числа нельзя.

Flex

Это сокращение для flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) не обязательны. Значение по умолчанию установлено в 0 1 auto.

Рекомендуется использовать это сокращённое свойство, а не указывать значения индивидуально.

Поддержка браузерами

Chrome - 21+
Safari - 3.1+
Firefox - 22+
Opera - 12.1+
IE - 11
Edge
Android - 2.1+
iOS - 3.2+

Заключение

В этой статье я попытался изложить все довольно сжато, но информативно. Flexbox все чаще и чаще начинает встречаться в разработке различных проектов, и у него определенно большое будущее.

Эта технология больше подходит для компонентов приложения и небольших макетов, хотя и весьма сложных, тогда как спецификация CSS Grid Layout предназначена для более масштабных макетов.

Плюсы

  1. Не нужны сетки различных HTML-фреймворков
  2. Управление блоками абсолютно наглядно и гибко.
  3. Полностью решена проблема вертикального позиционирования.
  4. Полная поддержка всеми современными браузерами, кроме Internet Explorer.

Минусы

  1. Невозможность использования под Internet Explorer 9.
  2. Internet Explorer 10+ не понимают некоторые условия Flexbox.


Этот материал на английском языке — CSS Flex-Box: Web-Development Guide


Читайте также: Обзор CSS Grid — технологии для упрощения разметки HTML-страниц

LinkedIn

24 комментария

Подписаться на комментарииОтписаться от комментариев Комментарии могут оставлять только пользователи с подтвержденными аккаунтами.

Тема flex-basis не раскрыта.

Самый информативный источник по флексам: www.w3.org/TR/css-flexbox-1 (W3C Candidate Recommendation, 19 October 2017).

Как уже было указано ниже:
— более исчерпывающая шпаргалка:css-tricks.com/snippets/css/a-guide-to-flexbox.
— поиграться вживую: flexboxfroggy.com.

Поддержка браузерами: caniuse.com.
Без префиксов: хром — с 2013, ФФ с 2014, ИЕ — с версии 11.

Но за стататью спасибо, да. Добро пожаловать в 2018 год.

Осень 2018-го. На DOU статья о том как использовать флексы, которые некоторые используют уже второй год. Причем статья с ошибками и неполными данными...

И да — не стоит поминать старые IE, старые версии bourbon для sass дают миксин +flex, в котором и автопрефиксы и дополнение свойств для старых IE

И насчет «небольших макетов» — bootstrap 4 перешел не на гриды, а на флексбокс, о чем-то наверное говорит?

А где объяснение align-content?

Б.О.Я.Н! (Було Опубліковано. Яскравості Немає)

У автора є стаття по грідах, опублікована раніше. Чому, Ви таку цікаву хронологію публікацій вибрали. А взагалі плюс в карму.

Не поздновато ли?)

Це класно, що на Доу з’являється більше технічних топіків. Автору дякуємо за працю. Але в 2018 — огляд основ роботи з флексами, серйозно? Тут народ вже про «гріди» в продакшн задумується, а Ви «обзор Flex-box».
P.S. Крута стаття де можна вживу «поюзати» флекси html5.by/blog/flexbox . За 2014 рік, до речі)))

Лучше поздно, чем никогда!

Не нужны сетки различных HTML-фреймворков

Они как бы тоже на флексбоксе сделаны, а может даже уже на модном grid. Но фишка фреймворка не только и не столько в сетках.

Сейчас бы, в конце 2018, написать статью про флексы.

Про flex-grow описано абсолютно невірно. Ця властивість визначає пропорці розподілення вільного місця. Якщо елемент буде мати flex-grow: 2 то він виросте на вдвічі більше вільного місця, а не буде займати вдвічі більше місця.

Точно. Хоча і це не завжди так. Наприклад: коли в одного child блока flex-grow:1, а в інших 0, то він просто старається зайняти весь вільний простір, що залишився від інших children блоків, які змаштабувались або по вмісту або по явно заданій ширині.

Ну насправді описаний вище випадок підпадає під опис, оскільки воно ж все оприділяє пропорційно. Все вільне місце ділиться на суму всіх flex-grow’ів в одному контейнері, якщо ж ця сума є 1, тоді елемент з таким flex-grow отримує все вільне місце. Це ж банальний поділ, тому якщо всі елементи окрім одного мають 0, то не важливо чи в нього flex-grow: 1 чи flex-grow: 100 він всеодно отримає все вільне місце.

100%. А, я ніколи в такому контексті про це не думав. Дякую)))

Класний ресурс для кращого розуміння: flexboxfroggy.com

Flexbox все чаще и чаще начинает встречаться в разработке различных проектов, и у него определенно большое будущее.

Мне казалось, что флекс это уже давно стандарт и используется везде, а не «начинает встречаться». Разве нет?

Нет конечно, все еще таблицами верстаем

можна з 2012 року, стандарт для адмінок і не продуктових сайтів більше двох років!
ті хто верстає під IE9 і нижче: СТРАДАЙТЕ

ті хто верстає: СТРАДАЙТЕ

я исправил. можешь не благодарить.

зараз би в 2018 підтримувати 9іе (у нас його доля 0.05%)

Именно так. Еще бы по флоатам статьи писали.

Судя по хронологии событий статья по флоатам — следующая.

Подписаться на комментарии