В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.
Поддержка браузерами технологии CSS Flexbox
Технология Flexbox поддерживается уже почти всеми используемые на сегодняшний момент браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).
Основы Flexbox (сетка)
В основу Flexbox положена сетка. Она состоит всего из 2 элементов. Первый элемент – это flex-контейнер. Создание flex-контейнера осуществляется посредством добавления к необходимому HTML элементу CSS-свойства display
со значением flex
или
flex-inline
.
После этого все непосредственные дочерние элементы flex-контейнера (дети) автоматически становятся flex-элементами (2 элемент flexbox сетки).
HTML разметка:
<div class="flex-container"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
CSS-стили:
.flex-container { display: flex; /* flex || inline-flex */ }

Flex-элементы по умолчанию занимают всю высоту flex-контейнера.
Значение flex
или flex-inline
определяет то, как flex-контейнер будет представлен на странице. Если его необходимо представить как блок, то используйте значение flex
. Если элемент необходимо представить как строчный, то используйте значение flex-inline
. В этом случае он будет занимать столько места странице, сколько необходимо для отображения его элементов.
Направление выстраивания flex-элементов
Указание направления выстраивания flex-элементов внутри flex-контейнера осуществляется посредством осей.

Во flexbox выделяют 2 оси. Первая ось называется основной или главной (по умолчанию направлена вправо). Вторая — поперечная (по умолчанию направлена вниз).
Элементы во flex-контейнере располагаются в одну линию (по умолчанию) даже тогда, когда им не хватает места. Выстраиваются flex-элементы в flex-контейнере по направлению основной оси.

В CSS Flexbox разрешить перенос flex-элементов на новые линии (если им не хватает места в текущей линии) осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap
со значением
wrap
или wrap-reverse
.
flex-wrap: wrap; /* nowrap (в одну линию - по умолчанию) wrap (разрешить перенос flex-элементов на новые линии) wrap-reverse (осуществлять перенос flex-элементов в обратном порядке) */
Значения wrap
и wrap-reverse
CSS-свойства flex-wrap
определяют направление поперечной оси.
Установка направления главной оси flexbox осуществляется с помощью CSS-свойства flex-direction
.
flex-direction: row; /* row (вправо) - по умолчанию row-reverse (налево) column (вниз) column-reverse (вверх) */
С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не горизонтально (строками), а вертикально (колонками).

Свойства flex-direction
и
flex-wrap
можно указать с помощью универсального CSS свойства flex-flow
:
flex-flow: row nowrap; /* 1 значение - flex-direction, 2 значение - flex-wrap */
Выравнивание flex-элементов
Во Flexbox выравнивание элементов внутри контейнера осуществляется по двум направлениям (осям).
Выравнивание flex-элементов по направлению главной оси
Выравнивание элементов вдоль основной оси осуществляется с помощью CSS свойства justify-content
:
justify-content: flex-start; /* flex-start (flex-элементы выравниваются относительно начала оси) – по умолчанию flex-end (flex-элементы выравниваются относительно конца оси) center (по центру flex-контейнера) space-between (равномерно, т.е. с одинаковым расстоянием между flex-элементами) space-around (равномерно, но с добавлением половины пространства перед первым flex-элементом и после последнего) */

Выравнивание flex-элементов вдоль поперечной оси
Выравнивание flex-элементов во flex-контейнере по направлению поперечной оси осуществляется с помощью CSS-свойства
align-items
:
align-items: stretch; /* stretch (растягиваются по всей длине поперечной оси) – по умолчанию flex-start (относительно начала поперечной оси) flex-end (относительно конца поперечной оси) baseline (относительно базовой линии) center (по центру) */

Выравнивание линий flex-контейнера
CSS Flexbox позволяет выравнивать не только сами flex-элементы, но и линии на которых они расположены.
align-content: stretch /* stretch (растягиваются по всей длине поперечной оси) – по умолчанию flex-start (относительно начала поперечной оси) flex-end (относительно конца поперечной оси) center (по центру) space-between (равномерно, т.е.
одинаковым расстоянием между линиями) space-around (равномерно, но с добавлением половины пространства перед первой линией и после последней) */

Свойство align-content
имеет смысл использовать только тогда, когда flex-элементы во flex-контейнере располагаются на нескольких линиях. Чтобы это произошло, необходимо, во-первых, чтобы ширина всех flex-элементов была больше ширины flex-контейнера, а во-вторых flex-контейнер должен иметь в качестве CSS-свойства flex-wrap
значение wrap
или wrap-reverse
.
CSS-свойство align-self
Свойство align-self
в отличие от предыдущих (justify-content
, align-items
и align-content
) предназначено для flex-элементов. Оно позволяет изменить выравнивание flex-элемента вдоль направления поперечной оси. Свойство align-self
может принимать такие же значения как
align-items
.
align-items: stretch; /* auto (по умолчанию) || stretch || flex-start || flex-end || baseline || center */
Пример:
<div class="flex-container"> <div class="flex-container_element-1"> 1 </div> <div class="flex-container_element-2"> 2 </div> <div class="flex-container_element-3"> 3 </div> <div class="flex-container_element-4"> 4 </div> </div>
CSS:
.flex-container { display: flex; width: 300px; height: 150px; align-items: center; padding: 10px; background-color: #efefef; } .flex-container_element-1, .flex-container_element-2, .flex-container_element-3, .flex-container_element-4 { flex-basis: 70px; text-align: center; padding: 15px; font-size: 30px; } .flex-container_element-1 { align-self: flex-start; background: #fe4; } .flex-container_element-2 { align-self: flex-end; background: pink; } .flex-container_element-3 { align-self: stretch; background: lime; } .flex-container_element-4 { align-self: auto; background: cyan; }

Изменение порядка следования flex-элементов
По умолчанию flex-элементы отображаются во flex-контейнере в том порядке, в котором они расположены в HTML коде. Для изменения порядка следования одних flex-элементов относительно других в CSS Flexbox можно использовать свойство order
. Данное CSS свойство выстраивает flex-элементы во flex-контейнере в порядке возрастания их номеров.
order: 0; /* 0 (по умолчанию) целое положительное или отрицательное число */
Например:
<div class="flex-container"> <div class="flex-container_element-1">...</div> <div class="flex-container_element-2">...</div> <div class="flex-container_element-3">...</div> <div class="flex-container_element-4">...</div> </div> CSS: .flex-container { display: flex; } /* переместим 2 flex-элемент в конец */ .flex-container_element-2 { order: 2; } /* передвинем 3 элемент до 2 */ .flex-container_element-3 { order: 1; } /* расположим 4 flex-элемент до 1 */ .flex-container_element-4 { order: -1; }

Управление шириной flex-элемента
Во Flexbox есть несколько CSS свойств, определяющих то, какая ширина может быть у flex-элемента.
CSS-свойство flex-basis
Данное свойство предназначено для установления начальной ширины flex-элементу. Задавать значение ширины можно посредством различных единиц измерения, таких как px, %, em и др. По умолчанию данное свойство имеет значение auto
(в этом случае ширина элемента будет рассчитываться автоматически на основании его содержимого).
Конечная ширина flex-элемента будет определяться в зависимости от значений CSS-свойств flex-grow
и flex-shrink
, которые установлены не только для этого элемента, но и для других flex-элементов этого flex-контейнера.
CSS-свойство flex-grow
Это свойство определяет, может ли начальная ширина flex-элемента увеличиваться (расти). Увеличение ширины flex-элемента осуществляется за счёт свободного пространства линии. В качестве значения CSS-свойства flex-grow
указывается целое число. Именно это значение и определяет (если оно больше или равно 1) какую часть свободного пространства flex-элемент заберёт себе.
Например:
<div class="flex-container"> <div class="flex-container_element-1">...</div> <div class="flex-container_element-2">...</div> </div> CSS: .flex-container { display: flex; width: 600px; } .flex-container_element-1 { flex-basis: 40%; flex-grow: 1; } .flex-container_element-2 { flex-basis: 40%; flex-grow: 4; }

В этом примере, если flex-элементы расположены на одной линии и в ней есть свободное пространство (600×(1-0,8)=120px):
- к ширине элемента
.flex-container_element-1
добавится 1/5 часть этого пространства (120×1/5=24px); - к ширине элемента
.flex-container_element-2
добавится 4/5 части этого пространства (120×4/5=96px).
Другими словами, CSS свойство flex-grow
позволяет не просто указать, что ширина flex-элемента может вырасти, но и задать, насколько эта величина может вырасти по отношению к другим элементам.
По умолчанию CSS свойство flex-grow имеет значение 0. Это означает, что flex-элемент не может расти (увеличивать свою ширину).
CSS-свойство flex-shrink
Данное свойство определяет, может ли ширина flex-элемента уменьшиться. Уменьшение ширины flex-элемента будет осуществляться только в том случае, если ширины линии будет не достаточно для отображения всех flex-элементов, расположенных в ней. Необходимая ширина рассчитывается на основании начальной ширины, который имеет каждый flex-элемент в ней.
Например:
<div class="flex-container"> <div class="flex-container_element-1">...</div> <div class="flex-container_element-2">...</div> </div> CSS: .flex-container { display: flex; width: 500px; } .flex-container_element-1 { flex-basis: 300px; flex-shrink: 1; } .flex-container_element-2 { flex-basis: 300px; flex-shrink: 3; }

Ширина flex-контейнера 500px. Для отображения flex-элементов необходимо 600px. В итоге не хватает 100px. В этом примере уменьшаться могут 2 flex-элемента (.flex-container_element-1
и .flex-container_element-2
). Ширина первого flex-элемента .flex-container_element-1
в данном случае составит 300 – 1/4*100= 275px. Ширина второго flex-элемента .flex-container_element-2
в данном случае составит 300 – 3/4*100= 225px.
Значение по умолчанию:
flex-shrink: 1;
Если вам необходимо запретить уменьшение ширины flex-элементу, то в качестве значения свойства flex-shrink
необходимо указать число 0.
CSS-свойство flex
Для удобной установки flex-grow
, flex-shrink
и flex-basis
можно использовать CSS свойство flex
.
Значение по умолчанию:
flex: 0 1 auto; /* 0 - flex-grow (1 значение) 1 - flex-shrink (2 значение) auto - flex-basis (3 значение) */
Верстка макета страницы на CSS Flexbox
В этом разделе создадим простой адаптивный макет на Flexbox.
Структура макета будет состоять из 3 секций:
- header (для вывода заголовка и основного меню);
- main (для отображения основной части);
- footer (для футера).
Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально (<992px).
<header class="container"> [Шапка страницы...] </header> <main class="container"> <div class="row-flex"> <article class="main_article col-flex"> [Основная часть...] </article> <aside class="main_aside col-flex"> [Дополнительная часть...] </aside> </div> </main> <footer class="container"> [Футер...] </footer>
CSS:
/* контейнер (устанавливает ширину блока в зависимости от ширины viewport) */ .container { position: relative; margin-left: auto; margin-right: auto; padding-right: 15px; padding-left: 15px; } @media (min-width: 576px) { .container { width: 540px; max-width: 100%; } } @media (min-width: 768px) { .container { width: 720px; max-width: 100%; } } @media (min-width: 992px) { .container { width: 960px; max-width: 100%; } } @media (min-width: 1200px) { .container { width: 1140px; max-width: 100%; } } /* flex-контейнер */ .row-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; } /* CSS настройки flex-элементов */ .col-flex { position: relative; width: 100%; min-height: 1px; padding-right: 15px; padding-left: 15px; } /* ширина блоков article и aside по умолчанию */ .main_article, .main_aside { -webkit-box-flex: 0; -webkit-flex: 0 0 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } /* ширина блоков article и aside для больших экранов */ @media (min-width: 992px) { /* 2/3 от ширины контейнера */ .main_article { -webkit-box-flex: 0; -webkit-flex: 0 0 66.666667%; -ms-flex: 0 0 66.666667%; flex: 0 0 66.666667%; max-width: 66.666667%; } /* 1/3 от ширины контейнера */ .main_aside { -webkit-box-flex: 0; -webkit-flex: 0 0 33.333333%; -ms-flex: 0 0 33.333333%; flex: 0 0 33.333333%; max-width: 33.333333%; } }
Для поддержки макета большинством браузеров добавим в CSS необходимые префиксы и max-width
.
Для «превращения» блока во flex-контейнер будем использовать класс row-flex
. Установку ширины каждому flex-элементу (main_article
и main_aside
) внутри flex-контейнера будем осуществлять с помощью CSS-свойства flex
.

В качестве примера разметим посредством Flexbox ещё блок «Футер» и секцию раздела main-article
«Интересненькое на сайте».
Секцию «Футер» разделим на 4 равные части (минимальная ширина одной части — 200px), а «Интересненькое на сайте» на 3 части (минимальная ширина одной части — 300px).
<header class="container"> [Шапка страницы...] </header> <main class="container"> <div class="row-flex"> <article class="main_article col-flex"> [Основная часть...] <!-- Секция "Интересненькое на сайте --> <div class="row-flex"> <div class="main_other_article col-flex" style="min-width:300px"> [Ещё 1...] </div> <div class="main_other_article col-flex" style="min-width:300px"> [Ещё 2...] </div> <div class="main_other_article col-flex" style="min-width:300px"> [Ещё 3...] </div> </div> </article> <aside class="main_aside col-flex"> [Дополнительная часть...] </aside> </div> </main> <footer class="container"> <div class="row-flex"> <div class="footer_block col-flex" style="min-width:200px"> [Секция футера 1...] </div> <div class="footer_block col-flex" style="min-width:200px"> [Секция футера 2...] </div> <div class="footer_block col-flex" style="min-width:200px"> [Секция футера 3...] </div> <div class="footer_block col-flex" style="min-width:200px"> [Секция футера 4...] </div> </div> </footer>
Дополнительный CSS:
.footer_block, .main_other_article { -webkit-flex-basis: 0; -ms-flex-preferred-size: 0; flex-basis: 0; -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; max-width: 100%; }
Демо макета страницы на Flexbox
itchief.ru
На этом уроке мы сделаем адаптивную верстку на flex CSS всего лишь одной секции по PSD макету.
Прежде чем приступить к верстке, надо произвести анализ макета, предварительно открыв его в графическом редакторе, например в Photoshop. Глядя на макет, сразу представляем себе структуру HTML разметки.
Секция состоит из общего контейнера (wrap), выровненного по центру, внутри которого два разных блока. Верхний блок (header) содержит заголовок и слоган, а в нижнем блоке родителя (section) находятся в свою очередь ещё три блока ребенка (div id=»item»). В каждом блоке ребенке есть картинка, подзаголовок, текстовый абзац и кнопка. Все три блока идентичны и их содержимое, как и они сами — отцентрировано.
Так выглядит HTML структура без применения стилей:
Зачем надо оборачивать все теги общим контейнером wrapper-ом?
Затем, чтобы задать необходимые отступы от окна браузера для элементов сайта.
#wrap {
width: 80%;
margin: 5% auto;
}
Как эти три блока с id #item расположить в ряд?
section {
display: flex;
}
Очевидно, что метод верстки на flex CSS, будет применяться к блоку родителю, чтобы его трое детей блоков, встали в ряд и держались там до определенного момента (разрешения экрана). Ведь без применения flexbox-ов, непослушные детки блоки, встанут друг под друга, таково их естественное поведение. А вот когда они это сделают, мы решим позже, когда займёмся адаптивностью под планшеты и мобильные телефоны.
Я сознательно не комментирую весь код, эта статья должна максимально раскрыть тему адаптивной верстки на flex-ах CSS, иначе мы закопаемся в дебрях кода и потеряем главную тему.
Весь HTML код:
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Адаптивная верстка на FLEX CSS</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
rel="stylesheet">
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrap">
<header>
<h1>How it works</h1>
<p>Learn more about our features</p>
</header>
<section>
<div id="item">
<img src="images/file_icon.png">
<h2>Easy file managament</h2>
<p>Fusce ipsum augue, consectetur quis dignissim
eget, malesuada vitae ipsum. Learn more about.
</p>
<a href="#">
<button>Learn More</button>
</a>
</div>
<div id="item">
<img src="images/calendar_icon.png">
<h2>Save time and money</h2>
<p>Praesent porttitor interdum arcu, non lobortis
metus non. Integer pretium mattis nisi.
</p>
<a href="#">
<button>Learn More</button>
</a>
</div>
<div id="item">
<img src="images/cloud_icon.png">
<h2>Cloud backup support</h2>
<p>Integer nec nisl quam. Ut quis sapien ac dolor
congue tristique non consectetur massa.
</p>
<a href="#">
<button>Learn More</button>
</a>
</div>
</section>
</div>
</body>
</html>
CSS код:
@import url("reset.css");
body {
font-family: 'Open Sans', sans-serif;
color: #909b9c;
font-size: 90%;
}
#wrap {
width: 80%;
margin: 5% auto;
}
header {
text-align: center;
margin-bottom: 50px;
}
header h1 {
text-transform: uppercase;
font-weight: 700;
color: #2c3e50;
font-size: 210%;
margin-bottom: 15px;
}
section {
display: flex;
flex-wrap: nowrap;
justify-content: space-around;
}
section #item {
width: 28%;
text-align: center;
padding: 15px;
}
#item img {
max-width: 100%;
}
#item h2 {
font-weight: 600;
font-size: 120%;
color: #2c3e50;
margin-top: 40px;
margin-bottom: 20px;
}
#item p {
line-height: 20px;
}
button {
margin-top: 30px;
background-color: #00bef1;
border-radius: 50px;
padding: 15px 35px;
color: #fff;
border: none;
cursor: pointer;
}
Демонстрация HTML страницы: демо
На следующем уроке сделаем нашу верстку адаптивной на flex CSS и анимируем элементы секции.
myrusakov.ru
Пример 1. Как сделать фотогалерею на Флексбокс
Разместить фотографии по строкам и столбцам на Флексбокс гораздо проще, чем многим кажется.
Рассмотрим простую сетку:
У нас есть main.gallery и 10 изображений в нем.
Убедимся, что main.gallery растягивается на весь доступный экран:
Кое-что об изображениях
По умолчанию все изображения inline-block элементы. У них есть ширина и высота. Они выстроятся в линию (только если они не слишком большие и могут все поместиться)
На старт
Сейчас наша галерея будет выглядеть следующим образом:
А теперь, на сцену выходит Флексбокс:
С этого момента поведение изображений изменилось. Из inline-block элементов они стали flex-items.
В результате применения Флексбокс к .gallery все картинки уместились в одну линию. Да еще и растянулись по вертикали, вот так:
Все это результат стандартного поведения Флексбокс:
- Сплющить все дочерние элементы в одну линию и никуда их не переносить. Не самое лучшее решение для галереи, так что изменим его:
Это разрешит перенос элементов на другую строку как и полагается
- Теперь картинки располагаются в несколько линий. Но они все еще растянуты по вертикали и это определенно не характерно для изображений в галерее.
Свойство align-items флекс-контейнера по умолчанию равно значению stretchИзменим его:
Это защитит картинки от растягивания.
Кроме того они выровнены относительно начала вертикальной оси:
Наша мощная флексбокс-галерея готова.
Преимущества использования Флексбокс
Сейчас преимущества использования Флексбокс не особо заметны, ведь тот же самый вид был и до его подключения.
Кроме легко получаемой адаптивности, преимущество флексбокс заключается в возможностях выравнивания.
Флекс-контейнер .gallery имеет несколько свойств для настройки выравнивания: flex-direction: row , justify-content: flex-start и align-items: flex-start.
Разметку галереи можно легко поменять поигравшись со следующим значением:
Кроме того, картинки могут быть отцентрованы и по горизонтали и по вертикали .gallery.
Флексбокс предоставляет много вариантов выравнивания. Играйтесь со значениями, как сочтете нужным.
Можете посмотреть на действующую Флексбокс галерею здесь.
Пример 2: Как сделать карточки на Флексбокс
Карточки очень популярны в интернете. Гугл, Твиттер, Пинтерест и прочие им подобные – все используют карточки.
В UI-дизайне карточка – это шаблон, объединяющий схожую информацию в адаптивный контейнер. Внешне он напоминает игральную карту.
Существует много хороших способов применения Карточек. Например, сетка с ценами.
Давайте сделаем такую.
Разметка
Каждая карточка построена следующим образом:
У нас будет как минимум три карточки. Обернем их в div.cards
Теперь у нас есть родственные элементы.
В этом примере родственные элементы будут заполнять вcе доступное окно просмотра
Установка Флексбокс
Следующий код инициализирует Флексбокс в контексте блока .card
Если вы помните предыдущий пример, flex-wrap позволяет элементам flex-items располагаться в несколько линий, если они не помещаются в контейнер. Давайте зададим .card исходную ширину, используя Флексбокс
Это свойство устанавливает значения flex-grow и flex-shrink равными 0. Значение flex-basis будет равным 250px.
В том виде, что у нас есть сейчас карточки будут выровнены относительно начала страницы и растянуты по вертикали
В некоторых случаях это может быть идеальным решением. Но в большинстве случаев – нет.
Поведение флекс-контейнеров по умолчанию
Вид наших карточек является результатом стандартного поведения флекс-контейнеров.
Карточки располагаются в начале страницы (top left) потому что у justify-content установлено значение flex-start.
Кроме того, карточки растянуты на всю высоту родительского элемента, потому что у свойства align-items значение по умолчанию stretch.
Изменение стандартных значений
Мы можем получить впечатляющий результат, изменив стандартные значения флексбокс свойств.
Смотрите сами:
Мы можете посмотреть код примера на Codepen.
Пример 3: Как сделать сетку на Флексбокс
На концепции, которая обсуждается в этом примере, строятся целые CSS-фреймфорки. Так что это очень важно.
Что такое сетка?
Сетка – это набор прямых пересекающихся вертикальных и горизонтальных линий, использующихся для структурирования контента
Если вам знакомы CSS-фреймворки, такие как Bootstrap, то вы точно использовали сетки раньше.
Давайте начнем с базовой сетки
Базовая сетка
Некоторые свойства этой сетки:
- Ячейки клетки располагаются равномерно и растянуты по всей ширине линии.
- Все ячейки одинаковой высоты.
Этого очень легко добиться, используя Флейксбокс
Каждая строка .row будет флекс-контейнером.
Каждый элемент внутри .row станет флекс-элементом. Все флех-элементы равномерно распределяются по линии.
С точки зрения дизайна не важно, будет ли у нас три вложенных элемента
Или 6:
Или 12:
Решение
Чтобы получить этот результат необходимы всего два шага.
- Инициализировать Флексбокс
- Каждому flex-item позволить заполнять строку в равных пропорциях
Вот и все.
Объяснение решения
flex – это сокращенное имя свойства, объединяющего в себе flex-grow, flex-shrink и flex-basis.
flex: 1 – установлено только одно значение для свойства и оно задается свойству flex-grow.
flex-shrink и flex-basis будут равны 1 и 0
Ячейки определенного размера
Иногда нам не нужно, чтобы все элементы строки были одинакового размера.
Вам могут понадобиться ячейки вдвое (или в любое другое количество раз) большие чем прочие.
Решение довольно просто.
Для конкретно этой ячейки необходимо изменить класс следующим образом:
Затем включите класс в разметку:
Ячейка с классом .row__cell–2 будет в два раза больше ячейки по умолчанию.
Для ячейки, занимающей треть свободного пространства код будет следующий:
Ячейки с определенным выравниванием
Благодаря Флекбоксу не нужно для каждой ячейки задавать определенное выравнивание, каждая может иметь свое собственное значение
Используйте следующее свойство:
Таким образом определенная ячейка будет выровнена по верху row.
Разумеется, вы должны добавить класс этой особой ячейки в разметку. Взгляните на первый вложенный div разметки:
Ниже приведены другие примеры выравнивания
Общее выравнивание внутри строк
Выровнены могут быть не только ячейки, но и все дочерние элементы блока.
Измените класс следующим образом:
Очень важно, чтобы измененный класс .row–top был добавлен элементу row или родительскому флекс-контейнеру.
Ниже приведены другие варианты выравнивания:
Вложенные сетки
Без лишних действий элементы row могут быть вложены друг в друга.
Здесь расположены готовые сетки.
Пример 3: Как сделать макет сайта, используя Флексбокс
Строительство макетов полностью на Флексбокс не особо одобряется сообществом разработчиков.
И, разделяя данное мнение, я все же считаю, что бывают ситуации, когда это допустимо.
Самый главный совет, который я могу вам дать: Используйте флексбокс, когда это имеет смысл.
Я объясню это на следующем примере.
Макет сайта “святой Грааль”
Самый наистандартнейший макет страницы на свете
Есть два способа попытаться построить этот макет с помощью Flexbox.
Начнем с первого. Для него нужно разместить во флекс-контейнере header, footer, nav, article и aside.
Разметка
Так выглядит наша разметка:
Среди прочих, в стандартнейшей разметке есть особое правило: центральная колонка, article в разметке должна идти перед обоими сайдбарами nav и aside.
Подключаем флексбокс
Поскольку дочерние элементы должны идти сверху вниз, изменим стандартное направление флексбокс
- header и footer должны быть фиксированной ширины
- main должен занимать все свободное пространство в контейнере
Надеюсь, вы помните, что запись flex: 1 означает тоже самое что и flex-grow: 1, flex-shrink: 1 и flex-basis: 0
На этом этапе необходимо позаботиться о содержимом main – блоках article, nav и aside.
Сделаем main флекс-контейнером
А для nav и aside установим значение width
Убедимся, что article занимает все доступное ему пространство
Осталось сделать всего одну вещь. Поменяем значения flex-order, чтобы nav отображался первым
Свойство order используется, чтобы переопределить порядок flex-items.
Все элементы flex-items внутри контейнера отображаются в порядке возрастания значения order. Элемент с наименьшим значением будет отображаться первым.
По умолчанию значение order для всех flex-items равно 0.
Второе решение для макета
Предудышее решение использует flex-container для всего контейнера. Макет очень сильно зависит от flexbox.
Посмотрим на более разумный подход. Еще раз взглянем на результат, который должен у нас получиться.
header и footer могут быть блочными элементами. Без лишних вмешательств они и так заполнят все доступное им простанство контейнера и будут прижаты к верху и низу
Что означает, что флекс-контейнер необходим только для main.
Единственная сложность здесь заключается в том, что вам необходимо самим вычислить высоту блока main. Он должен занимать все свободное пространство между header и footer
Рассмотрим этот код. Он использует CSS функцию calc для того, чтобы вычислить высоту main.
Высота блока должна быть равна calc (100vh – высота хэдера – высота футера).
В предыдущем случае вы должны были задать фиксированную высоту футеру и хэдеру. Теперь вы поступаете таким же образом только с main.
Здесь лежит готовый результат.
Макет сайта в 2 колонки
Двухколоночный макет очень распространен. Их тоже очень легко строить на флексбокс.
Вот наша верстка:
Инициализируем флексбокс
Задаем блоку aside фиксированную ширину
И, наконец, убедимся, что main занимает все доступное пространство
Вот, в общем-то, и все, что нужно сделать.
Пример 5. Медиа-объекты на Флексбокс
Медиа-объекты повсюду: от твитов до постов в Фейсбуке.
Внимательно посмотрим на верстку
Как вы догадались, .media станет нашим основным флекс-контейнером
По умолчанию flex-items контейнера растягивается по вертикали, чтобы занять всю доступную высоту.
Убедимся, что .media-body заполняет все свободное пространство
Давайте зафиксируем тянущийся бокс
Вот и все.
Перевернутый медиа-объект
Нет никакой необходимости вносить изменения в html-код, чтобы повернуть медиа-объект.
Просто поменяем местами элементы flex-items вот так:
Теперь картинки будут располагаться после .media-body и media-heading
Вложенные медиа-объекты
Вы можете сделать вложенные медиа-объекты без изменения CSS-стилей, написанных ранее!
Все работает!
Unicode медиа-объекты
Мы не обязаны ограничиваться только картинками.
Без каких-либо изменений в ранее написанных CSS-стилях, вы можете вместо изображения вставить юникод.
Я поместил сюда смайлик
Чтобы получить этот результат мы просто заменили img на div. А вот здесь вы можете подсмотреть юникоды некоторых смайликов-эмодзи.
Медиа-объект с HTML
А еще вы можете использовать html-объекты как в примере ниже
В качестве html-объекта в примере используется ☎ и на картинке вы можете видеть результат
Поэкспериментируйте с этими примерами на CodePen.
Пример 6. Как сделать компоненты форм на Флексбокс
Очень сложно найти сайты, которые не используют формы в том или ином виде
Посмотрим на код
В этом примере представлена комбинация выровненных полей ввода с кнопкой или с текстовым блоком. И вновь, это очень легко сделать при помощи флексбокса.
Инициализируем флексбокс-контекст
Убедимся, что поле занимает все доступное ему пространство
Наконец, по своему желанию, вы можете добавить стили для кнопок и блоков с текстом
Код из этих примеров есть на Codepen.
Пример 7. Как сделать макет мобильного приложения на Флексбокс
В этом примере рассмотрим построение вот такого макета мобильного приложения.
Но этот пример будет немного отличаться от предыдущих. Я объясню процесс построения макета при помощи псевдокода, а вы его сделаете.
Считайте это практикой, чтобы вы не расслаблялись.
Шаг 1.
Отделите макет от картинки iPhone и получите следующее:
Шаг 2.
Определите body как флекс-контейнер.
Шаг 3.
По умолчанию flex-direction контейнера установлен как row. Но в нашем случае, нужен column.
Шаг 4.
Задайте элементам 1 и 3 фиксированные значения высоты height: 50px.
Шаг 5.
Элемент 2 должен занимать все доступное пространство. Используйте свойство flex-grow или короткую запись flex; 1.
Шаг 6.
Наконец, определите каждый блок контента медиа-объектом, как в предыдущем примере.
В результат этих шести шагов у вас получится макет мобильного приложения.
Заключение
По моему опыту работы в UI рано или поздно вы столкнетесь с одним из вышеперечисленных примеров.
А теперь идите и напишите что-нибудь шикарное! ?
Оригинал статьи
keynikell.ru
Введение
Модуль разметки Flexbox (от английского Flexible Box – гибкий блок), находящийся на данный момент на этапе «Возможная рекомендация» стандартизации W3C (W3C Candidate Recommendation) нацелен на обеспечение более эффективного способа разметки, выравнивания и распределения места между элементами в контейнере, даже если их размер неизвестен и/или определяется динамически (вот почему его назвали «гибкий»).
Основная идея, стоящая за гибкой разметкой – это наделить контейнер способностью изменять высоту/ширину (и порядок) его элементов для оптимального заполнения доступного пространства (в основном для поддержки всех видов и размеров экранов).
Flex-контейнер растягивает элементы, чтобы заполнить свободное пространство или сжимает их, чтобы предотвратить выход за границы.
Что наиболее важно, разметка Flexbox не зависит от направления, в противоположность обычным разметкам (блокам, которые ориентированы вертикально и строчным элементам, располагающимся горизонтально).
И хотя элементы обычной разметки хорошо работают для страниц, им не хватает гибкости (и это не игра слов) для поддержки больших и сложных приложений (особенно если речь заходит об изменении ориентации, размеров, растяжении, сжатии и так далее).
Примечание: разметка Flexbox лучше всего подходит для компонентов приложения и небольших макетов, в то время как разметка с помощью grid предназначена для верстки более масштабных макетов.
Основные понятия и термины
Так как Flexbox это целый модуль, а не отдельное свойство, он включает в себя много элементов, в том числе и целый набор свойств. Некоторые из них предназначены для применения к контейнеру (родительскому элементу, известному как flex-контейнер), в то время как другие должны быть применены к дочерним элементам (назовем их flex-элементы).
Если обычная разметка основывается на направлениях блоков и строчных элементов, то flex-разметка базируется на направлениях flex-потока. Пожалуйста, обратите внимание на приведенную ниже схему из спецификации, объясняющую основную идею, стоящую за flex-разметкой:
В основном, элементы будут размещены либо вдоль главной оси (от точки main-start до main-end), либо вдоль поперечной оси (от точки cross-start до cross-end):
- main axis – это главная ось flex-контейнера, вдоль которой размещаются flex-элементы. Будьте осторожны, она не обязательно располагается горизонтально, ее положение зависит от свойства flex-direction (смотрите ниже);
- main-start | main-end — flex-элементы располагаются внутри контейнера, начиная от точки main-start, и доходят до точки main-end;
- main size – это ширина или высота flex-элемента, в зависимости от основной величины. В качестве значения свойства main size может быть установлено значение ширины или высоты;
- cross axis – поперечная ось, перпендикулярная главной оси. Ее направление зависит от направления главной оси.
- cross-start | cross-end – flex-строки заполняются элементами и размещаются в контейнере, начиная со стороны cross-start по направлению к стороне cross-end;
- cross size – ширина или высота flex-элемента, в зависимости от выбранной размерности. Свойство может иметь значение либо ширины, либо высоты поперечной размерности.
Свойства родительского класса (flex-контейнера)
display
Это свойство определяет flex-контейнер: строчной или блоковый, в зависимости от установленного значения. Также оно разрешает flex-контекст для всех его прямых потомков:
Отметим, что CSS-столбцы (columns) не имеют эффекта во flex-контейнере.
flex-direction
Это свойство задает главную ось, определяющую направление, в котором размещаются flex-элементы во flex-контейнере. Flexbox (за исключением опционального обертывания) является концептом однонаправленной разметки.
Представьте, что flex-элементы в первую очередь располагаются либо в горизонтальных, либо вертикальных колонках:
- row (по умолчанию): слева направо для ltr; справа налево для rtl;
- row-reverse: справа налево для in ltr; слева направо для rtl;
- column: так же как row, но сверху вниз;
- column-reverse: так же как row-reverse, но снизу вверх.
flex-wrap
По умолчанию flex-элементы попытаются втиснуться в одну линию. Вы можете изменить это, и обернуть элементы как нужно с помощью этого свойства. Здесь играет роль и направление, в котором располагаются новые линии:
- nowrap (по умолчанию): однострочный / слева направо для ltr; справа налево для rtl;
- wrap: многострочный / слева направо для ltr; справа налево для rtl;
- wrap-reverse: многострочный / справа налево для ltr; слева направо для rtl.
flex-flow (применяется к родительскому элементу flex-контейнера)
Это сокращенная форма свойств flex-direction и flex-wrap, которые вместе определяют главную и поперечную оси flex-контейнера. По умолчанию задается значение row nowrap:
justify-content
Данное свойство задает выравнивание вдоль главной оси. Это помогает распределить лишнее свободное пространство, в том случае, если все flex-элементы в строке негибкие, либо гибкие, но достигли своего максимального размера. Также данное свойство позволяет получить контроль над выравниваем элементов, когда они выходят за границы строки:
- flex-start (по умолчанию): элементы выравниваются к началу строки;
- flex-end: элементы выравниваются к концу строки;
- center: элементы выравниваются по центру строки;
- space-between: элементы распределяются в строке равномерно: первый элемент располагается в начале строки, последний – в конце;
- space-around: элементы распределяются в строке равномерно с одинаковым расстоянием между собой.
align-items
Это свойство определяет то, как по умолчанию располагаются flex-элементы относительно поперечной оси на текущей строке. Его можно считать версией justify-content для поперечной оси (перпендикулярной главной):
- flex-start: граница элементов cross-start располагается на линии cross-start;
- flex-end: граница элементов cross-start располагается на линии cross-end;
- center: элементы располагаются по центру поперечной оси;
- baseline: выравнивание элементов происходит согласно базовой линии;
- stretch (по умолчанию): элементы растягиваются для того, чтобы заполнить контейнер (с учетом значений min-width/max-width).
align-content
Это свойство позволяет выравнивать строки внутри flex-контейнера, когда есть свободное место на поперечной оси, что схоже с тем, как свойство justify-content выравнивает отдельные элементы относительно главной оси.
Примечание: это свойство не будет работать, если есть только одна строка flex-элементов:
- flex-start: строки располагаются в начале контейнера;
- flex-end: строки располагаются в конце контейнера;
- center: строки располагаются посередине контейнера;
- space-between: строки распределяются равномерно; первая строка – в начале контейнера, а последняя – в конце;
- space-around: строки размещены равномерно на одинаковом расстоянии друг от друга;
- stretch (по умолчанию): строки растягиваются, чтобы заполнить оставшееся пространство.
Свойства дочерних элементов
(flex-элементы)
Order
По умолчанию, flex-элементы располагаются в порядке, заданном источником. Однако свойство order контролирует порядок, в котором элементы появляются во flex-контейнере:
flex-grow
Это свойство позволяет flex-элементу «разрастаться» в случае необходимости. Оно принимает безразмерное значение, служащее в качестве пропорции. Это значение определяет, какой объем доступного пространства внутри flex-контейнера может занять элемент.
Если для всех элементов свойство flex-grow установлено в 1, то для каждого дочернего элемента будет задан одинаковый размер внутри контейнера. Если вы установите для одного из дочерних элементов значение 2, то он займет в два раза больше места, чем другие:
Отрицательные числа недопустимы.
flex-shrink
Это свойство определяет для flex-элементов возможность сжиматься в случае необходимости:
Отрицательные числа недопустимы.
flex-basis
Это свойство определяет размер элементов по умолчанию перед распределением оставшегося пространства:
flex
Это свойство является сокращенной формой для комбинации свойств flex-grow, flex-shrink и flex-basis. Второй и третий параметры (flex-shrink и flex-basis) задаются опционально. Значения по умолчанию: 0 1 auto:
align-self
Это свойство позволяет переопределить выравнивание, заданное по умолчанию (или определенное свойством align-items) для отдельных flex-элементов.
Доступные значения вы можете найти в описании свойства align-items:
Обратите внимание, что float, clear и vertical-align не работают с flex-элементами.
Примеры
Давайте начнем с очень простого примера, решив практически ежедневную проблему: идеальное выравнивание по центру. Нет ничего проще, если использовать flexbox:
Этот пример основывается на том факте, что свойство margin, установленное в значение auto, поглощает лишнее пространство. Поэтому такое задание отступа выравнивает элемент ровно по центру от обеих осей.
Теперь давайте воспользуемся еще несколькими свойствами. Предположим, что у нас есть список из 6 элементов, все они фиксированного размера (для эстетичности), но с возможностью автоматического заполнения.
Мы хотим, чтобы они были красиво, равномерно распределены по горизонтальной оси таким образом, чтобы при изменении размера окна браузера, все смотрелось хорошо (без использования медиа запросов):
Готово! Все остальное — уже вопросы оформления. Здесь располагается демонстрация этого примера. Перейдите по ссылке и попробуйте изменить размер окна, чтобы посмотреть, что произойдет:
HTML:
CSS:
Давайте попробуем еще кое-что. Допустим, у нас на самом верху веб-сайта находится меню навигации, выровненное вправо, но мы хотим, чтобы на экранах среднего размера оно располагалось по центру, а для устройств с маленьким экраном – располагалось в один столбец. Все достаточно просто:
CSS:
HTML:
CSS:
Давайте попробуем сделать еще лучше, поиграв с «гибкостью» flex-элементов. Как насчет мобильной разметки в три столбца с заголовком и подвалом во всю ширину? И с выводом элементов, независимым от порядка, заданного исходным кодом:
CSS:
HTML:
CSS:
Использование префиксов для flexbox
Flexbox требует использования вендорных префиксов для возможности поддержки большинством браузеров. Это включает в себя не только использование вендорных префиксов перед свойствами, но и полностью разные названия свойств и значений.
А все потому, что спецификация flexbox менялась с течением времени, создав «old» (старую), «tweener«(промежуточную), и «new» (новую) версии.
Возможно, наилучший выход в этой ситуации — это писать код, используя новый (и финальный) синтаксис и пропускать CSS через Autoprefixer, который очень хорошо обрабатывает откаты к предыдущим версиям.
В качестве альтернативы, ниже приведен Sass метод @mixin для помощи с некоторыми префиксами, который к тому же раскрывает идею того, какие действия должны быть предприняты:
SCSS:
Поддержка браузерами
Разделена «версиями» flexbox на:
- (new) – означает поддержку последнего синтаксиса из спецификации (например, display: flex;).
- (tweener) – означает поддержку дополнительного неофициального синтаксиса от 2011 года (например, display: flexbox;).
- (old) – означает поддержку старого синтаксиса от 2009 года (например, display: box;).
Браузер Blackberry версии 10+ поддерживает новый синтаксис.
Перевод статьи «A Complete Guide to Flexbox» был подготовлен дружной командой проекта Сайтостроение от А до Я.
www.internet-technologies.ru
Начинаем погружение
Flexbox определяет набор CSS свойств для контейнера (flex-контейнер) и его дочерних элементов (flex-блоков). Первое, что нужно сделать – это указать контейнеру display:flex
или display:inline-flex
.
HTML
<div class="my-flex-container"> <div class="my-flex-block">item1</div> <div class="my-flex-block">item2</div> <div class="my-flex-block">item3</div> </div>
CSS
.my-flex-container{ display: flex; }
Основные свойства 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
: блоки выровнены по их baselinestretch
(значение по умолчанию) : блоки растянуты, занимая все доступное место по поперечной оси, при этом все же учитываютсяmin-width
/max-width
, если таковые заданы.
СSS свойства flex-direction
, justify-content
, align-items
должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
Демо основных свойств flex-контейнера
Оси и выравнивания по ним – это основы flex. Расслабьтесь, покликайте по демке и используйте ее, если нужно будет освежить в памяти.
flexbox demo
Многострочная организация блоков внутри flex-контейнера.
flex-wrap
Все примеры, которые мы приводили выше, были построены с учетом однострочного (одностолбцового) расположения блоков. Надо сказать, что по умолчанию flex-контейнер всегда будет располагать блоки внутри себя в одну линию. Однако, спецификацией также поддерживается многострочный режим. За многострочность внутри flex-контейнера отвечает CSS свойство flex-wrap
.
Доступные значения flex-wrap:
nowrap
(значение по умолчанию) : блоки расположены в одну линию слева направо (в rtl справа налево)wrap
: блоки расположены в несколько горизонтальных рядов (если не помещаются в один ряд). Они следуют друг за другом слева направо (в rtl справа налево)wrap-reverse
: то-же что и wrap, но блоки располагаются в обратном порядке.
flex-flow
– удобное сокращение для flex-direction + flex-wrap
По сути,flex-flow
предоставляет возможность в одном свойстве описать направление главной и многострочность поперечной оси. По умолчанию flex-flow: row nowrap
.
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
CSS
/* т.е. ... */ .my-flex-block{ flex-direcrion:column; flex-wrap: wrap; } /* это то же самое, что ... */ .my-flex-block{ flex-flow: column wrap; }
align-content
Существует также свойство align-content
, которое определяет то, каким образом образовавшиеся ряды блоков будут выровнены по вертикали и как они поделят между собой все пространство flex-контейнера.
Важно: align-content
работает только в многострочном режиме (т.е. в случае flex-wrap:wrap;
или flex-wrap:wrap-reverse;
)
Доступные значения align-content:
flex-start
: ряды блоков прижаты к началу flex-контейнера.flex-end
: ряды блоков прижаты к концу flex-контейнераcenter
: ряды блоков находятся в центре flex-контейнераspace-between
: первый ряд блоков располагается в начале flex-контейнера, последний ряд блоков блок – в конце, все остальные ряды равномерно распределены в оставшемся пространстве.space-around
: ряды блоков равномерно распределены в от начала до конца flex-контейнера, разделяя все свободное пространство поровну.stretch
(значение по умолчанию): Ряды блоков растянуты, дабы занять все имеющееся пространство.
СSS свойства flex-wrap
и align-content
должны применяться непосредственно к flex-контейнеру, а не к его дочерним элементам.
Демо свойств многострочности в flex
flexbox demo
CSS правила для дочерних элементов flex-контейнера (flex-блоков)
flex-basis
– базовый размер отдельно взятого flex-блока
Задает изначальный размер по главной оси для flex-блока до того, как к нему будут применены преобразования, основанные на других flex-факторах. Может быть задан в любых единицах измерения длинны (px
, em
, %
, …) или auto
(по умолчанию). Если задан как auto
– за основу берутся размеры блока (width, height), которые, в свою очередь, могут зависеть от размера контента, если не указанны явно.
flex-grow
– “жадность” отдельно взятого flex-блока
Определяет то, на сколько отдельный flex-блок может быть больше соседних элементов, если это необходимо. flex-grow
принимает безразмерное значение ( по умолчанию 0
)
Пример 1:
- Если все flex-блоки внутри flex-контейнера имеют
flex-grow:1
, то они будут одинакового размера - Если один из них имеет
flex-grow:2
, то он будет в 2 раза больше, чем все остальные
Пример 2:
- Если все flex-блоки внутри flex-контейнера имеют
flex-grow:3
, то они будут одинакового размера - Если один из них имеет
flex-grow:12
, то он будет в 4 раза больше, чем все остальные
Т.е абсолютное значение flex-grow
не определяет точную ширину. Оно определяет его степень “жадности” по отношению к другим flex-блокам того же уровня.
flex-shrink
– фактор “сжимаемости” отдельно взятого flex-блока
Определяет, насколько flex-блок будет уменьшаться относительно соседних эдементов внутри flex-контейнера в случае недостатка свободного места. По умолчанию равен 1
.
flex
– короткая запись для свойств flex-grow, flex-shrink и flex-basis
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
CSS
/* т.е. ... */ .my-flex-block{ flex-grow:12; flex-shrink:3; flex basis: 30em; } /* это то же самое, что ... */ .my-flex-block{ flex: 12 3 30em; }
Демо для flex-grow, flex-shrink и flex-basis
flexbox demo
align-self
– выравнивание отдельно взятого flex-блока по поперечной оси.
Делает возможным переопределять свойство flex-контейнера align-items
для отдельного flex-блока.
Доступные значения align-self (те же 5 вариантов, что и для align-items
)
flex-start
: flex-блок прижат к началу поперечной осиflex-end
: flex-блок прижат к концу поперечной осиcenter
: flex-блок располагаются в центре поперечной осиbaseline
: flex-блок выравнен по baselinestretch
(значение по умолчанию) : flex-блок растянут, чтобы занять все доступное место по поперечной оси, при этом учитываютсяmin-width
/max-width
, если таковые заданы.
order
– порядок следования отдельно взятого flex-блока внутри flex-контейнера.
По умолчанию все блоки будут следовать друг за другом в порядке, заданном в html. Однако этот порядок можно изменить с помощью свойства order
. Оно задается целым числом и по умолчанию равно 0
.
Значение order
не задает абсолютную позицию элемента в последовательности. Оно определяет вес позиции элемента.
HTML
<div class="my-flex-container"> <div class="my-flex-block" style="order: 5" >item1</div> <div class="my-flex-block" style="order: 10">item2</div> <div class="my-flex-block" style="order: 5" >item3</div> <div class="my-flex-block" style="order: 5" >item4</div> <div class="my-flex-block" style="order: 0" >item5</div> </div>
В данном случае, блоки будут следовать один за другим вдоль главной оси в следующем порядке: item5, item1, item3, item4, item2
Демо для align-self и order
flexbox demo
margin: auto
по вертикали. Мечты сбываются!
Flexbox можно любить хотя бы за то, что привычное всем выравнивание по горизонтали через margin:auto
здесь работает и для вертикали!
.my-flex-container { display: flex; height: 300px; /* Или что угодно */ } .my-flex-block { width: 100px; /* Или что угодно */ height: 100px; /* Или что угодно */ margin: auto; /* Магия! Блок отцентрирован по вертикали и горизонтали! */ }
Вещи, которые следует помнить
- Не следует использовать flexbox там, где в этом нет необходимости.
- Определение регионов и изменение порядка контента во многих случаях все-таки полезно делать зависимым от структуры страницы. Продумывайте это.
- Разберитесь в flexbox и знайте его основы. Так намного легче достичь ожидаемого результата.
- Не забывайте про margin-ы. Они учитываются при установке выравнивания по осям. Также важно помнить, что margin-ы в flexbox не “коллапсятся”, как это происходит в обычном потоке.
- Значение float у flex-блоков не учитывается и не имеет значения. Это, наверно, как-то можно использовать для graceful degradation при переходе на flexbox.
- flexbox очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц, но показал себя не с лучшей стороны при верстке базовых макетов (расположение article, header, footer, navbar и т.п.). Это все еще спорный момент, но эта статья довольно убедительно показывает недостатки xanthir.com/blog/b4580
В заключение
Я думаю, что flexbox, конечно же, не вытеснит все остальные способы верстки, но, безусловно, в ближайшее время займет достойную нишу при решении огромного количества задач. И уж точно, пробовать работать с ним нужно уже сейчас. Одна из следующих статей будет посвящена конкретным примерам работы с flex-версткой. Подписывайтесь на новости 😉
html5.by