path: root/files/ru/learn/css/css_layout/flexbox/index.html

---
title: Flexbox
slug: Learn/CSS/CSS_layout/Flexbox
tags:
  - CSS
  - Обучение
  - Стилизация
translation_of: Learn/CSS/CSS_layout/Flexbox
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>

<p class="summary">Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Необходимые навыки:</th>
   <td>HTML основы (изучите <a href="ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), знание того, как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Цель:</th>
   <td>Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.</td>
  </tr>
 </tbody>
</table>

<h2 id="Почему_Flexbox">Почему Flexbox?</h2>

<p>Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.</p>

<p>С их помощью сложно или невозможно достичь следующих простых требований к макету:</p>

<ul>
 <li>Вертикального выравнивания блока внутри родителя.</li>
 <li>Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.</li>
 <li>Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.</li>
</ul>

<p>Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!</p>

<h2 id="Разберём_простой_пример">Разберём простой пример</h2>

<p>В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">посмотреть его вживую</a>.</p>

<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>

<h2 id="Определяем_какие_элементы_разместить_в_виде_flex_блоков">Определяем, какие элементы разместить в виде flex блоков</h2>

<p>Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):</p>

<pre class="brush: css notranslate">section {
  display: flex;
}</pre>

<p>В результате у нас получится вот так:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>

<p>Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.</p>

<p><strong>Примечание</strong>: вы также можете установить значение {{cssxref("display")}} <code>inline-flex, </code>если хотите расставить inline элементы как flex блоки.</p>

<h2 id="Внутри_flex_модели">Внутри flex модели</h2>

<p>Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:</p>

<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p>

<ul>
 <li><strong>Главная ось (main axis)</strong> проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются <strong>main start</strong> и <strong>main end</strong>.</li>
 <li><strong>Поперечная ось (cross axis)</strong>  проходит перпендикулярно Flex элементам. Начало и конец этой оси называются <strong>cross start</strong> and <strong>cross end</strong>.</li>
 <li>Родительский элемент, на который назначено свойство <code>display: flex ( </code>{{htmlelement("section")}} в нашем примере) называется <strong>flex container</strong>.</li>
 <li>Элементы, размещённые в нём как Flex блоки называются <strong>flex items</strong> (в нашем примере это {{htmlelement("article")}} ).</li>
</ul>

<p>Запомните эти термины, они пригодятся вам в последующих разделах.</p>

<h2 id="Столбцы_или_строки">Столбцы или строки?</h2>

<p>В Flexbox есть свойство под названием {{cssxref("flex-direction")}}, которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение <code>row</code>, т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).</p>

<p>Попробуйте добавить следующую строчку в ваш файл:</p>

<pre class="brush: css notranslate">flex-direction: column</pre>

<p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p>

<div class="note">
<p><strong>Примечание</strong>: вы можете также располагать flex элементы в обратном направлении, используя значения <code>row-reverse</code> и <code>column-reverse</code>. Попробуйте их тоже!</p>
</div>

<h2 id="Перенос_строк">Перенос строк</h2>

<p>Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> и <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">посмотрите его вживую</a> (сохраните его себе на компьютер, если хотите изучить этот пример):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>

<p>Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:</p>

<pre class="brush: css notranslate">flex-wrap: wrap</pre>

<p>Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>

<p>Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство <code>flex: 200px</code>, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.</p>

<p>Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства {{cssxref("flex-direction")}} на <code>row-reverse</code> — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.</p>

<h2 id="flex-flow_сокращение">flex-flow сокращение</h2>

<p>На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить</p>

<pre class="brush: css notranslate">flex-direction: row;
flex-wrap: wrap;</pre>

<p>на</p>

<pre class="brush: css notranslate">flex-flow: row wrap;</pre>

<h2 id="Гибкое_изменение_размеров_flex_элементов">Гибкое изменение размеров flex элементов</h2>

<p>Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, или скачайте <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">просмотр</a>).</p>

<p>Прежде всего, добавим следующее правило в конец вашего CSS кода:</p>

<pre class="brush: css notranslate">article {
  flex: 1;
}</pre>

<p>Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу {{htmlelement("article")}} значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.</p>

<p>Теперь добавьте следующее правило в строку после предыдущего:</p>

<pre class="brush: css notranslate">article:nth-of-type(3) {
  flex: 2;
}</pre>

<p>Обновив страницу, вы увидите, что третий элемент {{htmlelement("article")}} занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).</p>

<p>Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:</p>

<pre class="brush: css notranslate">article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 2 200px;
}</pre>

<p>Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>

<p>Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент {{htmlelement("article")}}, макет будет и дальше выглядеть также хорошо.</p>

<h2 id="flex_краткий_код_против_развёрнутого">flex: краткий код против развёрнутого</h2>

<p>{{cssxref("flex")}} это сокращённое свойство, в которым можно задать до трёх разных свойств:</p>

<ul>
 <li>Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-grow")}}.</li>
 <li>Следующее значение пропорции — {{cssxref("flex-shrink")}} — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.</li>
 <li>Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-basis")}}.</li>
</ul>

<p>Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.</p>

<h2 id="Горизонтальное_и_вертикальное_выравнивание">Горизонтальное и вертикальное выравнивание</h2>

<p>Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">просмотр</a>) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>

<p>Сначала сделайте себе копию этого примера.</p>

<p>Теперь добавьте следующую строку в низ кода CSS:</p>

<pre class="brush: css notranslate">div {
  display: flex;
  align-items: center;
  justify-content: space-around;
}</pre>

<p>Обновите страницу, и вы увидите, что кнопки теперь хорошо центрированы, горизонтально и вертикально. Мы сделали это с помощью двух новых свойств.</p>

<p>{{cssxref("align-items")}} контролирует, где на поперечной оси находятся flex элементы.</p>

<ul>
 <li>По умолчанию стоит значение <code>stretch</code>, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.</li>
 <li>Значение <code>center</code> , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.</li>
 <li>Также есть значения <code>flex-start</code> и <code>flex-end</code>, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее {{cssxref("align-items")}}.</li>
</ul>

<p>Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:</p>

<pre class="brush: css notranslate">button:first-child {
  align-self: flex-end;
}</pre>

<p>Посмотрите, что произошло и удалите эти строки.</p>

<p>{{cssxref("justify-content")}} контролирует, где flex элементы располагаются на главной оси.</p>

<ul>
 <li>По умолчанию стоит значение <code>flex-start</code>, которое располагает все элементы в начале главной оси. </li>
 <li>Также можно использовать <code>flex-end, </code>чтобы расположить их в конце.</li>
 <li><code>center</code> - также одно из значений <code>justify-content</code>, располагает все элементы по центру главной оси.</li>
 <li>Значение, которое мы использовали выше, <code>space-around</code>, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.</li>
 <li>И ещё одно значение, <code>space-between</code>, которое очень похоже на <code>space-around,</code> за исключением того, что оно не оставляет места на обоих концах.</li>
</ul>

<p>Попробуйте немного поиграть с этими значениями прежде чем продолжить</p>

<h2 id="Порядок_элементов_flex">Порядок элементов flex</h2>

<p>В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.</p>

<p>Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:</p>

<pre class="brush: css notranslate">button:first-child {
  order: 1;
}</pre>

<p>и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:</p>

<ul>
 <li>По умолчанию все элементы flex имеют значение {{cssxref ("order")}} равное 0.</li>
 <li>Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.</li>
 <li>Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.</li>
 <li>Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.</li>
</ul>

<p>Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:</p>

<pre class="brush: css notranslate">button:last-child {
  order: -1;
}</pre>

<h2 id="Вложенные_flex_блоки">Вложенные flex блоки</h2>

<p>Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">см. вживую</a>).</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<p>HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.</p>

<pre class="notranslate">section - article
          article
          article - div - button
                    div   button
                    div   button
                          button
                          button</pre>

<p>Давайте посмотрим на код, который мы использовали для макета.</p>

<p>Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.</p>

<pre class="brush: css notranslate">section {
  display: flex;
}</pre>

<p>Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.</p>

<pre class="brush: css notranslate">article {
  flex: 1 200px;
}

article:nth-of-type(3) {
  flex: 3 200px;
  display: flex;
  flex-flow: column;
}
</pre>

<p>Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.</p>

<pre class="brush: css notranslate">article:nth-of-type(3) div:first-child {
  flex: 1 100px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-around;
}</pre>

<p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p>

<pre class="brush: css notranslate">button {
  flex: 1;
  margin: 5px;
  font-size: 18px;
  line-height: 1.5;
}</pre>

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>Поддержка Flexbox доступна в большинстве новых браузеров: Firefox, Chrome, Opera, Microsoft Edge и IE 11, более поздних версиях Android / iOS и т. д.. Однако помните, что до сих пор используются более старые браузеры, которые не поддерживают Flexbox ( или поддерживают, но старую версию.)</p>

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

<p>Flexbox немного сложнее, чем некоторые функции CSS. Например, если в браузере отсутствует поддержка CSS тени, сайт по-прежнему будет можно использовать. А вот неподдерживаемые функции flexbox, возможно, полностью сломают макет, что сделает сайт непригодным.</p>

<p>Мы обсудим возможности преодоления проблем поддержки кросс-браузерности в следующем модуле.</p>

<h2 id="Подытожим">Подытожим</h2>

<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.</p>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>