Как изменить направление flex

В этой статье познакомимся с технологией CSS Flexbox, предназначенной для создания гибких макетов веб-страниц.

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

CSS Flexbox позволяет создать адаптивный дизайн намного проще, чем с использованием Float и позиционирования.

Flexbox можно использовать как для CSS разметки целой страницы, так и её отдельных блоков.

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

CSS Flexbox поддерживается всеми используемые на сегодняшний момент современными браузерами (с использованием префиксов: IE10+, Edge12+, Firefox 2+, Chrome 4+, Safari 3.1+, Opera 12.1+, iOS Safari 3.2, Opera mini, Android 2.1+, Blackberry 7+).

Основы CSS Flexbox

Создание CSS разметки с помощью Flexbox начинается с установки необходимому HTML элементу CSS-свойства display со значением flex или flex-inline.

После этого данный элемент становится flex-контейнером, а все его непосредственные дочерние элементы – flex-элементами. При этом когда мы говорим о flexbox то подразумеваем под этим только элемент с display:flex или display:flex-inline и все элементы непосредственно расположенные в нём. Таким образом в CSS Flexbox имеется всего два типа элементов: flex-контейнер и flex-элемент.

<style>
.flex-container {
  display: flex; /* flex || inline-flex */
}
<style>

<!-- flex-контейнер -->
<div class="flex-container">
  <div>flex-элемент #1</div>
  <div>flex-элемент #2</div>
  <div>flex-элемент #3</div>
</div>

По умолчанию flex-элементы во flex-контейнере занимают всю его высоту.

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

Устройство flex-контейнера. Направление осей

На рисунке представлена схема устройства flex-контейнера:

Направление расположение flex-элементы в flex-контейнере определяется посредством осей.

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

По умолчанию элементы во flex-контейнере располагаются вдоль направления главной оси (т.е. слева направо) на одной линии.

Направление главной оси можно изменить, осуществляется это с помощью CSS-свойства flex-direction.

flex-direction: row;
/* row (слева направо) - по умолчанию
    row-reverse (справа налево)
    column (сверху вниз)
    column-reverse (снизу вверх) */

С помощью этого свойства можно сделать так, чтобы flex-элементы располагались не рядами (rows), а колонками (columns). Осуществляется это с помощью значения column или column-reverse.

По умолчанию flex-элементы не переносятся на новую линию, даже когда им не хватает места в текущей линии. Они просто выходят за её пределы.

Но это можно изменить. Разрешить перенос flex-элементов на новые линии осуществляется с помощью установки flex-контейнеру CSS свойства flex-wrap со значением wrap или wrap-reverse.

flex-wrap: wrap;
/* nowrap (только на одной линии - по умолчанию)
    wrap (разрешить перенос flex-элементов на новые линии)
    wrap-reverse (осуществлять перенос flex-элементов в обратном порядке) */

Значения wrap и wrap-reverse CSS-свойства flex-wrap определяют направление поперечной оси.

Свойства 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

В этом разделе создадим простой адаптивный макет всей страницы на CSS Flexbox.

Структура макета будет состоять из 3 секций:

• header (для вывода заголовка и основного меню);
• main (для отображения основной части);
• footer (для футера).

Основную часть (main) в свою очередь разделим ещё на 2 раздела (их позиционирование будем осуществлять с помощью CSS Flexbox). На больших экранах (>=992px) эти разделы выстроим горизонтально, а на остальных — вертикально (<992px).

<style>
  /* контейнер */
  .container {
    width: 100%;
    max-width: 1200px;
    padding-right: 15px;
    padding-left: 15px;
    margin-left: auto;
    margin-right: auto;
  }

  /* flex-контейнер */
  .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  /* общие настройки для flex-элементов */
  .col {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
  }

  /* ширина блоков .col__article и .col__aside по умолчанию */
  .col__article,
  .col__aside {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* ширина блоков .col__article и .col__aside для больших экранов */
  @media (min-width: 992px) {
    /* 2/3 от ширины контейнера */
    .col__article {
      -ms-flex: 0 0 66.666667%;
      flex: 0 0 66.666667%;
      max-width: 66.666667%;
    }

    /* 1/3 от ширины контейнера */
    .col__aside {
      -ms-flex: 0 0 33.333333%;
      flex: 0 0 33.333333%;
      max-width: 33.333333%;
    }
  }
</style>

<header class="container">
  <!-- Шапка страницы -->
</header>
<main class="container">
  <div class="row">
    <article class="col col__article">
      <!-- Основная часть -->
    </article>
    <aside class="col col__aside">
      <!-- Боковая область -->
    </aside>
  </div>
</main>
<footer class="container">
  <!-- Футер -->
</footer>

В CSS для поддержки макета большинством браузеров добавлены свойства с префиксами и max-width.

Для «превращения» блока во flex-контейнер используется класс row. Установку ширины flex-элементам .col__article и .col__aside внутри flex-контейнера выполнено с использованием CSS-свойства flex.

В качестве примера разметим посредством flexbox ещё футер и создадим в элементе .col__article блок состоящий из трёх элементов (минимальная ширина одного элемента — 300px). В футере разместим четыре блока (минимальная ширина одного блока — 200px).

<style>
  /* ... */
  .col__other-article {
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    min-width: 300px;
  }

  .col__footer {
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    min-width: 200px;
  }
</style>

<header class="container">
  <!-- Шапка страницы -->
</header>
<main class="container">
  <div class="row">
    <article class="col col__article">
      <!-- Основная часть -->
      <div class="row">
        <div class="col col__other-article">
          <!-- Ещё 1 -->
        </div>
        <div class="col col__other-article" style="padding-bottom: 15px;">
          <!-- Ещё 2 -->
        </div>
        <div class="col col__other-article" style="padding-bottom: 15px;">
          <!-- Ещё 3 -->
        </div>
      </div>
    </article>
    <aside class="col col__aside">
      <!-- Боковая область -->
    </aside>
  </div>
</main>
<footer class="container">
  <div class="row">
    <div class="col col__footer">
      <!-- Секция футера 1 -->
    </div>
  </div>
  <div class="row">
    <div class="col col__footer">
      <!-- Секция футера 2 -->
    </div>
  </div>
  <div class="row">
    <div class="col col__footer">
      <!-- Секция футера 3 -->
    </div>
  </div>
  <div class="row">
    <div class="col col__footer">
      <!-- Секция футера 4 -->
    </div>
  </div>
</footer>

Свойство flex-direction позволяет установить направление, в котором флекс-элементы будут идти внутри своего флекс-контейнера. Оно принимает следующие значения:

• row
• row-reverse
• column
• column-reverse

Значения относительно простые — они позволяют указать, располагаются ли флекс-элементы в рядах или колонках, в обратном порядке или нет. Но конечное направление зависит от writing-mode.

Значение row

Это исходное значение, так что если вы не установите свойство flex-direction, именно это значение будет применяться.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
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>

Обратите внимание, что row не всегда означает горизонтальный. Режим записи определяет, будут ли ряды идти горизонтально или вертикально. При использовании вертикального режима записи ряд из флекс-элементов будет располагаться сверху вниз.

Вот что произойдёт, если мы применим writing-mode: vertical-rl к приведённому выше примеру.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
background: beige;
height: 100vh;
writing-mode: vertical-rl;
}
.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>

А вот что произойдёт, если мы добавим direction: rtl в этот пример.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
background: beige;
height: 100vh;
writing-mode: vertical-rl;
direction: rtl;
}
.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>

Сделаем ещё один шаг вперёд и добавим text-orientation: upright в этот пример. Вот что получилось.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
background: beige;
height: 100vh;
writing-mode: vertical-rl;
direction: rtl;
text-orientation: upright;
}
.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>

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

Этот же принцип применим ко всем другим значениям flex-direction, показанных ниже.

Значение row-reverse

Вы можете использовать flex-direction: row-reverse, чтобы элементы в ряду отображались в обратном порядке.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row-reverse;
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>

Значение 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>

Значение column-reverse

Значение flex-direction: column-reverse устанавливает элементы в колонке в обратном порядке.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: column-reverse;
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>

Переносы флекс-элементов

Вы можете использовать свойство flex-wrap и определить, как флекс-элементы переносятся внутри флекс-контейнера.

По умолчанию флекс-элементы не переносятся. Если они слишком широкие и не помещаются во флекс-контейнере, то элементы просто сжимаются до тех пор, пока все они не смогут поместиться. Текст внутри флекс-элементов может по-прежнему переноситься, но только не сами флекс-элементы.

Значение nowrap

Вот что я имею в виду (это поведение по умолчанию).

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
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;
width: 60%;
}
body {
margin: 0;
}
</style>
<div class=»container»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3</div>
</div>

У всех флекс-элементов в данном примере ширина задана как 60%. Это 60 процентов от ширины флекс-контейнера. Вы не можете разместить два элемента такой ширины рядом друг с другом, не говоря уже о трёх. Но поскольку начальное значение flex-wrap равно nowrap, то элементы не переносятся, а вместо этого они сжимаются.

Значение wrap

Теперь давайте добавим flex-wrap: wrap.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
background: beige;
height: 100vh;
flex-wrap: wrap;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
width: 60%;
}
body {
margin: 0;
}
</style>
<div class=»container»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3</div>
</div>

Значение wrap-reverse

Давайте теперь добавим flex-wrap: wrap-reverse.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
background: beige;
height: 100vh;
flex-wrap: wrap-reverse;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
width: 60%;
}
body {
margin: 0;
}
</style>
<div class=»container»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3</div>
</div>

Свойство flex-flow

Свойство flex-flow является сокращением для свойств flex-direction и flex-wrap, поэтому вы можете указать их одновременно. Вот пример.

<!doctype html>
<title>Пример</title>
<style>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
background: beige;
height: 100vh;
flex-flow: row-reverse wrap;
}
.red {
background: orangered;
}
.green {
background: yellowgreen;
}
.blue {
background: steelblue;
}
.container > div {
font-size: 5vw;
padding: .5em;
color: white;
width: 60%;
}
body {
margin: 0;
}
</style>
<div class=»container»>
<div class=»red»>1</div>
<div class=»green»>2</div>
<div class=»blue»>3</div>
</div>

Russian (Pусский) translation by Pembelight (you can also view the original English article)

Flexbox позволяет нам размещать флекс-элементы в любом порядке и направлении. Распределение порядка элементов с flexbox проще, чем с помощью float или CSS-сетки, даже если вы с этим не согласны.  Поскольку flexbox — это модель одномерного макета, в отличие от CSS-сетки, которая является двумерной, вам нужно обращать внимание только на одно направление.  W3C четко определелил правила, поэтому вам больше не придется иметь дело с float и clearfix.

В данном уроке вы узнаете, как использовать следующие свойства flexbox для расстановки элементов:

• flex-direction
• flex-wrap
• flex-flow
• order 

Расстановка  Vs. Перестановка элементов 

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

Что такое расстановка?

Когда мы настраиваем макет flexbox, сначала нужно определить исходный порядок, то есть мы должны решить, как позиционируются оси flex контейнера. Я подробно описал flexbox оси в своем уроке по выравниванию flexbox.

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

1. слева направо
2. справа налево
3. сверху вниз
4. снизу вверх

Мы устанавливаем главную ось с помощью свойства flex-direction, а затем решаем, как будут ужиматься flex элементы, используя свойство flex-wrap. Эти два свойства определяют, каким образом браузер разместит элементы в flex контейнере.

Так что же такое перестановка элементов?

Flexbox по умолчанию позволяет нам управлять порядком элементов, эффективно их переставляя с помощью свойства order. Перестановка элементов означает, что мы визуально меняем позиционирование элементов, в то время как исходный порядок остается без изменений.

Используя такие возможности flexbox, нам не приходится менять структуру HTML документа только ради его визуального отображения. Таким образом, скринридеры (и поисковые системы) считывают логически структурированный контент (например, боковая панель не имеет приоритета над основным контентом).

Свойство оrder для Flexbox

Порядок элементов во Flexbox происходит со свойствами flex-direction и flex-wrap: flex-direction указывает направление главной оси. Свойство  оrder может принимать следующие значения:

1. row (по умолчанию) главной оси: слева направо
2. row-reverse главной оси: справа налево
3. column главной оси : сверху вниз
4. column-reverse главной оси: снизу вверх

Flex-wrap определяет, расположены ли flex-элементы в один ряд или в несколько. Он также контролирует направление поперечной оси. Может иметь три значения:

1. nowrap (по умолчанию) размещает flex-элементы в одну строку; поперечная ось стоит в положении по умолчанию
2. wrap размещает  flex-элементы в несколько строк; поперечная ось стоит в положении по умолчанию
3. wrap-reverse размещает  flex-элементы в несколько строк; поперечная ось в обратном порядке

Положение поперечной оси по умолчанию:

• сверху вниз в случае row и row-reverse
• слева направо в случае column и column-reverse

В моей предыдущей статье о выравнивании flexbox вы можете найти четыре подробных примера (с демонстрациями) о том, как настроить основную ось в четырех разных направлениях, используя свойство flex-direction. Однако, когда возникает вопрос расстановки элементов во флексбоксе, по моему мнению более важно знать, как совместно использовать свойства flex-direction и flex-wrap для достижения  грамотного исходного кода. 

Пример шорткода

Мы используем простой код, чтобы увидеть, как работает flexbox расстановка элементов. В данном примере HTML состоит из нескольких элементов:

1

<div class="container">

2

      <div class="item item-1">1</div>

3

      <div class="item item-2">2</div>

4

      <div class="item item-3">3</div>

5

      <div class="item item-4">4</div>

6

      <div class="item item-5">5</div>

7

      <div class="item item-6">6</div>

8

      <div class="item item-7">7</div>

9

      <div class="item item-8">8</div>

10

      <div class="item item-9">9</div>

11

</div>

Элемент .container  div будет flex-контейнером, а div с классом .item будут flex-элементами. Мы будем использовать (почти) один и тот же CSS код во всех примерах, только поменяются свойства flex-direction и flex-wrap. Вот как выглядит наш CSS со значениями row и wrap:

1

html {

2

  background: #fff7f6;

3

}

4

.container {

5

  display: flex;

6

  flex-direction: row;

7

  flex-wrap: wrap;

8

}

9

.item {

10

  font-size: 2rem;

11

  line-height: 1;

12

  text-align: center;

13

  padding: 3rem;

14

  background: mistyrose;

15

  border: 3px solid tomato;

16

  color: tomato;

17

  margin: 6px;

18

}

Тот же пример в демонстрации на CodePen: 

Расстановка элементов с помощью Row и Column 

Теперь мы действительно дошли до самого интересного! Теоретически понять принцип расстановки элементв с помощью флексбокса не так уж и сложно, но на практике, безусловно, могут возникать проблемы.  Это происходит из-за того, что трудно предугадать, как разные варианты направления flex-direction и flex-wrap комбинируются между собой.

В подключенном ниже примере вы увидите, как макеты flex-direction: row и flex-direction: column взаимодействуют между собой с разными значениями свойства flex-wrap. Используйте выпадающие списки, чтобы увидеть их комбинации.

Как вы видите, когда flex-direction является row, flex-элементы располагаются горизонтально слева направо. Когда вместо wrap мы используем wrap-reverse, flexbox начинает выкладывать элементы снизу вверх, а не наоборот. Это происходит потому, что wrap-reverse меняет направление перпендикулярной оси.

Когда flex-direction это column, элементы располагаются вертикально сверху вниз. И когда мы используем wrap-reverse вместо wrap, flexbox начинает размещать элементы справа (теперь это начальная точка поперечной оси), а не слева.

Расстановка элементов с помощью row-reverse  и column-reverse 

Теперь давайте посмотрим на то, как flexbox размещает элементы, когда flex-direction — это row-reverse и column-reverse.

Как видно из демонстрации выше, в обоих случаях flexbox начинает выкладывать элементы, как и раньше, с начала по главной оси. Главная ось row-reverse проходит справа налево, поэтому flexbox начинает раскладывать элементы справа.  Кроме того, главная ось макета column-reverse проходит снизу вверх, поэтому элементы начинают размещаться снизу вверх flex контейнера.

Когда мы используем flex-wrap: wrap, flexbox начинает размещать элементы со свойством flex-direction: сверху row-reverse, и слева  column-reverse, так как они соответсвенно являются начальными точками поперечной оси.  

Когда мы меняем направление на flex-wrap: wrap-reverse, поперечная ось будет двигаться в противоположном направлении. Она будет размещать элементы при flex-direction снизу вверх row-reverse и справа налево при column-reverse.

Ускорьте процесс с помощью  flex-flow

Также значения flex-direction и flex-wrap могут применяться к одному классному CSS свойству. Оно называется flex-flow. Чтобы его использовать, нам нужно прописать эти два значения вместе, как это сделано ниже:

1

.container-1 {

2

    flex-flow: row wrap;

3

}

4

.container-2 {

5

    flex-flow: column-reverse wrap-reverse;

6

}

Перестановка элементов в Flexbox

Пришло время взглянуть на вещи немного по-другому.

Свойство order изменяет порядок по умолчанию для flex-элементов, который мы определяем с помощью flex-direction и flex-flow. Он влияет только на визуальное расположение элементов, но он не влияет на то, как скринридеры и другие пользовательские агенты, не относящиеся к CSS, читают исходный код.

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

В следующем примере .item-3 перемещается в начальную точку главной оси. Поскольку все элементы имеют значение по умолчанию 0, достаточно использовать правило order: -1, чтобы сделать его первым элементом в контейнере:

1

.item-3 {

2

    order: -1;   

3

}

Вы заметили, что эту же логику можно использовать для перемещения .item-3 к концу главной оси. Для этого нам только нужно назначить положительное значение свойства order.

Конечно, мы можем переставить столько flex элементов, сколько пожелаем (хотя имейте в виду, что перестановка всех элементов, скорее всего, не самое грамотное решение).  Свойства order различных flex элементов  всегда расположены относительно друг к другу. Ниже вы увидете, как можно поменять порядок  нескольких элементов во flex контейнере.

1

.item-3 {

2

  order: -1;

3

}

4

.item-4 {

5

  order: -2;

6

}

7

.item-5 {

8

  order: 2;

9

}

10

.item-7 {

11

  order: 1;

12

}

Порядок и доступность

Самое важное — это то, что свойство order не влияет на порядок стилизации, контент и логическую навигацию элементов.  Это значит, что когда мы изменяем порядок наших flex элементов, невизуальные ползователи не заметят изменения. Например, люди, использующие навигацию с помощью клавиатуры, будут по-прежнему перемещаться по ссылкам в исходном порядке.

Такое поведение flexbox может пригодиться в некоторых случаях. Например, можно сделать так называемый «Макет Святого Грааля» доступным с помощью порядка во флексбоксе. Макет Святого Грааля — это популярный макет блога с хедером, футером и двумя боковыми сайдбарами: слева и справа от основного контента.

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

1

.sidebar-left { 

2

  order: 1;

3

}

4

article {

5

  order: 2;

6

}

7

.sidebar-right {

8

  order: 3;

9

}

Flexbox & Writing Modes

Все сказанное в этом уроке относится к режиму записи LTR (left to right — слева направо). Оси Flexbox фактически следуют направлению письма документа, которое можно настроить с помощью свойств direction и writing-mode. Вот почему в режиме записи LTR главная ось движется слева направо, когда flex-direction является row. В режиме записи RTL (right to left — справа налево) он работает в противоположном направлении, справа налево, и все остальное меняется соответственно.

Это (Flex) Wrap!

Этот урок был второй частью из моей серии по flexbox. Обязательно прочитайте первую часть о выравнивании flexbox, чтобы узнать, как выровнять flex-элементы вдоль главной и поперечной оси.  Если вы хотите больше узнать о расстановке элементов во flexbox, MDN предлагает очень информативную статью на данную тему.

Узнайте больше