initial commit

7 files changed, 1349 insertions, 0 deletions

diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
new file mode 100644
index 0000000000..8a4e3ce28b
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
@@ -0,0 +1,112 @@
+---
+title: Обратная совместимость Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary">Flexbox очень хорошо поддерживается современными браузерами, однако есть несколько проблем, с которыми вы могли столкнуться. В этом руководстве мы рассмотрим, насколько хорошо flexbox поддерживается браузерами, а так же некоторые потенциальные проблемы, ресурсы и методы для создания обходных путей и запасных вариантов.</p>
+
+<h2 id="История_flexbox">История flexbox</h2>
+
+<p>Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.</p>
+
+<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы всеравно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p>
+
+<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">В 2009</a> спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать <code>display: box</code> и несколько <code>box-*</code> свойств, которые делали то, что сегодня вы понимаете под flexbox.</p>
+
+<p>Очередное <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">обновление</a> спецификации поменяло синтаксис на <code>display: flexbox</code> — и опять с вендорными префиксами.</p>
+
+<p>В конечном счете спецификация была обновлена, чтобы определить <code>display: flex</code> как способ создания flex-контейнера. Начиная с этого момента поддержка браузерами обновленной версии спецификации отличная.</p>
+
+<p>Существует несколько старых статей, которые описывают более ранние версии flexbox, их довольно легко вычислить по тому, как они описывают создание flex-контейнера. Если вы нашли что-то вроде  <code>display: box</code> или <code>display: flexbox</code>, то это уже устаревшая информация.</p>
+
+<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
+
+<p>Браузеры отлично поддерживают flexbox, и на данный момент большинству из них не нужны префиксы для этого. Safari последним из основных браузеров избавился от префиксов после релиза Safari 9 в 2015. Два браузера, о которых вам нужно помнить для обеспечения кроссбраузерности, это:</p>
+
+<ul>
+ <li>Internet Explorer 10, который внедрил <code>display: flexbox</code> версию спецификации с префиксом <code>-ms-</code>.</li>
+ <li>UC Browser, который все еще поддерживает спецификацию версии 2009 год с <code>display: box</code> и префиксом <code>-webkit-</code>.</li>
+</ul>
+
+<p>Также возьмите на заметку, что Explorer 11 поддерживает современный <code>display: flex,</code> однако не без багов.</p>
+
+<h2 id="Common_issues">Common issues</h2>
+
+<p>The majority of issues with flexbox relate to the changes in the specification, as it has been developed, and the fact that many of us were attempting to use an experimental specification in production. If you are trying to ensure backwards compatibility with old versions of browsers, and in particular IE10 and 11, the <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> site is a helpful resource. You will see that many of the listed bugs apply to old browser versions and are fixed in current browsers. Each of the bugs has a workaround listed — which can save you many hours of puzzling.</p>
+
+<p>If you want to include very old browsers with flexbox support then you can include the vendor prefixes in your CSS in addition to the unprefixed version. This is becoming less and less of a requirement today as support is widespread.<code> </code></p>
+
+<pre class="brush: css">.wrapper {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+}</pre>
+
+<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> is a useful way to see which prefixes are recommended, depending on how many versions you wish to go back with browser support. You can also check <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> for information about when prefixes were removed in browsers to make your decision.</p>
+
+<h2 id="Useful_fallback_techniques">Useful fallback techniques</h2>
+
+<p>Given that flexbox usage is initiated with value of the {{cssxref("display")}} property, when needing to support very old browsers which do not support flexbox at all, fallbacks can be created by overwriting one layout method with another. The specification defines what happens if you use other layout methods on an element which then becomes a flex item.</p>
+
+<h3 id="Floated_items">Floated items</h3>
+
+<blockquote>
+<p>“float and clear do not create floating or clearance of flex item, and do not take it out-of-flow.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Flex Containers</a></p>
+</blockquote>
+
+<p>In the following live example, I have floated two blocks and then set <code>display: flex</code> on the container. The items are now flex items, which means they stretch to equal height. Any float behaviour does not apply.</p>
+
+<p>You can test the fallback behaviour by removing <code>display: flex</code> from the wrapper.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p>
+
+<h3 id="display_inline-block">display: inline-block</h3>
+
+<p>Once an <code>inline-block</code> item becomes a flex item, it is <code>block</code>ified and so behavior of <code>display: inline-block</code> like preserving white space between items no longer applies.</p>
+
+<p>Remove <code>display: flex</code> to see the fallback behavior. You'll see white space added between the items, which is what happens when using <code>display: inine-block</code> as it prefers white space like other inline items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p>
+
+<h3 id="display_table-">display: table-<em> </em></h3>
+
+<p>The CSS table display properties are potentially very useful as a fallback, due to the fact that they allow design patterns such as full height columns and vertical centering and work back as far as Internet Explorer 8.</p>
+
+<p>If you use <code>display: table-cell</code> on an item in your HTML it takes on the styling of an HTML table cell. CSS creates anonymous boxes to represent these items so that you do not need to wrap each item in a wrapper to represent the HTML table row, and a second one to represent the table element itself, You can’t see or style these anonymous boxes; they are there purely to fix up the tree.</p>
+
+<p>If you then declare <code>display: flex</code> on the parent item, these anonymous boxes do not get created and so your item remains a direct child and can become a flex item — losing any of the table display features.</p>
+
+<blockquote>
+<p>“Note: Some values of display normally trigger the creation of anonymous boxes around the original box. If such a box is a flex item, it is blockified first, and so anonymous box creation will not happen. For example, two contiguous flex items with display: table-cell will become two separate display: block flex items, instead of being wrapped into a single anonymous table.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Flex Items</a></p>
+</blockquote>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p>
+
+<h3 id="The_vertical-align_property">The vertical-align property</h3>
+
+<p>The live example below demonstrates use of the {{cssxref("vertical-align")}} property along with <code>display: inline-block</code>. Both <code>display: table-cell</code> and <code>display: inline-block</code> allow for the use of this property. Use of <code>vertical-align</code> enables vertical alignment prior to flexbox. The property is ignored by flexbox and so you can use it in conjunction with <code>display: table-cell</code> or <code>display: inline-block</code> as a fallback and then safely use box alignment properties in flexbox instead.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p>
+
+<h2 id="Feature_Queries_and_flexbox">Feature Queries and flexbox</h2>
+
+<p>You can use <a href="/en-US/docs/Web/CSS/%40supports">feature queries</a> to detect flexbox support:</p>
+
+<pre class="brush: css">@supports (display: flex) {
+  // code for supporting browsers
+}</pre>
+
+<p>Note that Internet Explorer 11 does not support feature queries yet <em>does</em> support flexbox. If you decide the IE11 implementation is too buggy and you wish to serve it the fallback layout then you could use feature queries to serve flexbox rules only to those browsers with good flexbox support. Remember that if you want to include versions of browsers that had vendor-prefixed flexbox you would need to include the prefixed version in your feature query. The following feature query would include UC Browser, which supports feature queries and old flexbox syntax, prefixed:</p>
+
+<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) {
+  // code for supporting browsers
+}</pre>
+
+<p>For more information about using Feature Queries see <a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a> on the Mozilla Hacks blog.</p>
+
+<h2 id="Conclusion">Conclusion</h2>
+
+<p>While I’ve spent some time in this guide going through potential issues and fallbacks, flexbox is very much ready for you to be using in production work. This guide will help you in those cases where you do come across an issue or have the requirement to support older browsers.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
new file mode 100644
index 0000000000..347d429eb4
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -0,0 +1,228 @@
+---
+title: Основные понятия Flexbox
+slug: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p class="summary"><strong>CSS модуль раскладки Flexible Box</strong>, обычно называемый флексбокс или flexbox или просто flex (флекс), был разработан как модель одномерного-направленного макета и как один из методов распределения пространства между элементами в интерфейсе, с мощными возможностями выравнивания. В этой статье дается краткое описание основных функций flexbox, которые мы рассмотрим более подробно в остальных руководствах.</p>
+
+<p>Когда мы описываем flexbox как одномерно-направленный, мы  имеем в виду, что flexbox имеет дело с макетом в одной плоскости за раз – либо в виде строки, либо в виде столбца. Как альтернативу можно упомянуть двумерную модель CSS Grid Layout, которая управляет и столбцами и строками одновременно.</p>
+
+<h2 id="Flexbox_две_оси">Flexbox: две оси</h2>
+
+<p>При работе с flexbox нужно мыслить с точки зрения двух осей – главной оси и побочной оси. Главная ось определяется свойством {{cssxref ("flex-direction")}}, а побочная ось проходит перпендикулярно ей. Все, что мы делаем с flexbox, относится к этим осям, поэтому стоит с самого начала понять, как они работают.</p>
+
+<h3 id="Главная_ось">Главная ось</h3>
+
+<p>Главная ось определяется свойством <code>flex-direction</code>, которая может принимать одно из следующих значений:</p>
+
+<ul>
+ <li><code>row</code></li>
+ <li><code>row-reverse</code></li>
+ <li><code>column</code></li>
+ <li><code>column-reverse</code></li>
+</ul>
+
+<p>Если вы выберете <code>row</code> или <code>row-reverse</code>, ваша главная ось будет проходить в горизонтальном направлении <strong>(inline direction)</strong>.</p>
+
+<p><img alt="If flex-direction is set to row the main axis runs along the row in the inline direction." src="https://mdn.mozillademos.org/files/15614/Basics1.png" style="display: block; height: 152px; margin: 0px auto; width: 522px;"></p>
+
+<p>Если вы выберете <code>column</code> или <code>column-reverse</code>, ваша главная ось будет проходить в вертикальном направлении <strong>(block direction)</strong>.</p>
+
+<p><img alt="If flex-direction is set to column the main axis runs in the block direction." src="https://mdn.mozillademos.org/files/15615/Basics2.png" style="display: block; height: 227px; margin: 0px auto; width: 709px;"></p>
+
+<h3 id="Побочная_ось">Побочная ось</h3>
+
+<p>Побочная ось проходит перпендикулярно главной оси, поэтому, если свойство <code>flex-direction</code> (главная ось) задано как <code>row</code> или <code>row-reverse</code>, побочная ось будет проходить в вертикальном направлении.</p>
+
+<p><img alt="If flex-direction is set to row then the cross axis runs in the block direction." src="https://mdn.mozillademos.org/files/15616/Basics3.png" style="display: block; height: 125px; margin: 0px auto; width: 666px;"></p>
+
+<p>Если свойство <code>flex-direction</code> задано как <code>column</code> или <code>column-reverse</code>, побочная ось будет проходить в горизонтальном направлении.</p>
+
+<p><img alt="If flex-direction is set to column then the cross axis runs in the inline direction." src="https://mdn.mozillademos.org/files/15617/Basics4.png" style="display: block; height: 244px; margin: 0px auto; width: 523px;"></p>
+
+<p>Понимание того, с какой осью вы работаете (главная или побочная) очень важно для дальнейшего изучения Flexbox.</p>
+
+<h2 id="Начало_и_конец_строки">Начало и конец строки</h2>
+
+<p>Важно понимать, что flexbox не делает никаких предположений о режиме написания документа. Раньше CSS был сильно ориентирован на горизонтальный режим и режим письма слева направо. Современные методы верстки охватывают полный диапазон режимов письма, и поэтому мы больше не предполагаем, что строка текста будет начинаться в верхнем левом углу документа и будет проходить по направлению к правой стороне, а новые строки будут появляться одна под другой.</p>
+
+<p>Вы можете прочитать больше о взаимосвязи между flexbox и спецификацией Writing Modes в следующей статье, однако следующее описание должно помочь объяснить, почему мы не говорим о левом, правом, верхнем и нижнем направлениях наших flex-элементов.</p>
+
+<p>Если свойству <code>flex-direction</code> задано значение <code>row</code> и вы работаете с английским языком, то начало главной оси будет слева, а конец главной оси – справа.</p>
+
+<p><img alt="Working in English the start edge is on the left." src="https://mdn.mozillademos.org/files/15618/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Если бы вы работаете с арабским языком, то начало главной оси будет справа, а конец главной оси – слева.</p>
+
+<p><img alt="The start edge in a RTL language is on the right." src="https://mdn.mozillademos.org/files/15619/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>В обоих случаях начало побочной оси находится вверху flex контейнера, а конец – внизу, поскольку оба языка имеют режим горизонтальной записи.</p>
+
+<p>Спустя некоторое время становится естественным думать о начале и конце оси, а не о левом и правом краях. Это будет полезно для вас при работе с другими методами, такими как CSS Grid Layout, которые следуют тем же шаблонам.</p>
+
+<h2 id="Flex_контейнер">Flex контейнер</h2>
+
+<p>Область документа, использующая flexbox, называется flex контейнером. Чтобы создать flex контейнер, мы задаем значение <code>flex</code> или <code>inline-flex</code> для свойства {{cssxref ("display")}} контейнера. Как только мы делаем это, прямые потомки этого контейнера становятся flex элементами. Как и для всех свойств в CSS, некоторые начальные значения уже определены, поэтому при создании flex-контейнера все содержащиеся в нем flex-элементы будут вести себя следующим образом.</p>
+
+<ul>
+ <li>Элементы отображаются в ряд (свойство <code>flex-direction</code> по умолчанию имеет значение <code>row</code>).</li>
+ <li>Позиционирование элементов начинается от начала главной оси.</li>
+ <li>Элементы не растягиваются по основной оси, но могут сжиматься.</li>
+ <li>Элементы будут растягиваться, чтобы заполнить размер побочной оси.</li>
+ <li>Свойству {{cssxref("flex-basis")}} задано значение <code>auto</code>.</li>
+ <li>Свойству {{cssxref("flex-wrap")}} задано значение <code>nowrap</code>.</li>
+</ul>
+
+<p>Результатом этого является то, что все ваши элементы будут выстроены в ряд, используя размер содержимого в качестве их размера на главной оси. Если в контейнере больше элементов, чем можно уместить, они не будут обернуты и контейнер будет переполнен. Если некоторые элементы выше других, все элементы будут вытянуты вдоль побочной оси, чтобы заполнить ось в полный размер.</p>
+
+<p>Вы можете увидеть принцип работы в живом примере ниже. Попробуйте отредактировать или добавить дополнительные элементы, чтобы проверить поведение flexbox.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/the-flex-container.html", '100%', 480)}} </p>
+
+<h3 id="Изменение_flex-direction">Изменение flex-direction</h3>
+
+<p>Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка <code>flex-direction: row-reverse</code> сохранит порядок отображаения элементов вдоль строки, однако начало и конец строки поменяются местами.</p>
+
+<p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец стобца поменяются местами.</p>
+
+<p>В приведенном ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-direction.html", '100%', 350)}}</p>
+
+<h2 id="Многострочный_флекс-контейнер_с_flex-wrap">Многострочный флекс-контейнер с flex-wrap</h2>
+
+<p>Несмотря на то, что флекс-бокс - это однонаправленная модель, есть возможность завернуть наши флекс-элементы в несколько строк. При этом вы должны рассматривать каждую строку как новый флекс контейнер. Распределение пространства будет происходить на этой конкретной линии, не привязываясь к соседним линиям.</p>
+
+<p>Чтобы включить такое поведение, добавьте параметр {{cssxref("flex-wrap")}} со значением <code>wrap</code>. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Живой пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр <code>flex-wrap</code> установлен в значение <code>wrap</code>, элементы переносятся. Если Вы установите значение <code>nowrap</code>, то есть в начальное значение, то элементы ужмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости. Если им запретить ужиматься, или если они не смогут ужаться достаточно сильно, то при установленном значении <code>nowrap</code> будет происходить переполнение контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}</p>
+
+<p>Более подробно эту тема разбирается в статье <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Разбираемся с обёртыванием Flex элементов</a>.</p>
+
+<h2 id="Краткая_запись_направления_и_многострочности_flex-flow">Краткая запись направления и многострочности: flex-flow</h2>
+
+<p>Вы можете указать два свойства <code>flex-direction</code> и <code>flex-wrap</code> в одном {{cssxref("flex-flow")}}. Первое значение свойства определяет <code>flex-direction</code>, второе <code>flex-wrap</code>.</p>
+
+<p>В приведенном ниже примере вы можете изменить первое значение на одно из доступных для <code>flex-direction</code> - <code>row</code>, <code>row-reverse</code>, <code>column</code> or <code>column-reverse</code>, а второе на <code>wrap</code> или <code>nowrap</code>, чтобы посмотреть как изменятся элементы контейнера.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-flow.html", '100%', 400)}}</p>
+
+<h2 id="Свойства_применяемые_к_флекс-элементам">Свойства, применяемые к флекс-элементам</h2>
+
+<p>Управлять поведением флекс-элементов более детально мы можем с помощью их собственных свойств:</p>
+
+<ul>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+</ul>
+
+<p>В этом обзоре мы лишь кратко рассмотрим эти свойства. Чтобы получить более глубокое понимание обратитесь к руководству <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%BE%D0%BE%D1%82%D0%BD%D0%BE%D1%88%D0%B5%D0%BD%D0%B8%D1%8F_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2_%D0%B2%D0%B4%D0%BE%D0%BB%D1%8C_%D0%B3%D0%BB%D0%B0%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BE%D1%81%D0%B8">Управление соотношением элементов вдоль главной оси</a>.</p>
+
+<p>Чтобы понять как работают эти свойства, прежде нам необходимо разобраться с концепцией <strong>доступного пространства</strong>. Изменяя значения этих флекс свойств, мы влияем на то, как доступное пространство распределяется между нашими элементами. Эта концепция так же важна для выравнивания элементов.</p>
+
+<p>Если наш контейнер шириной 500 пикселей содержит три элемента шириной 100 пикселей каждый, для их размещения нам потребуется пространство шириной в 300 пикселей. Остается 200 пикселей свободного пространства. Если мы не изменим исходные значения этих свойств, флексбокс разместит это пространство за последним элементом.</p>
+
+<p><img alt="This flex container has available space after laying out the items." src="https://mdn.mozillademos.org/files/15620/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Если вместо этого мы хотим чтобы элементы росли и заполняли собой свободное пространство, нам нужно указать способ распределения оставшегося пространства между элементами. Это как раз то для чего предназначены <code>flex</code> свойства.</p>
+
+<h3 id="Свойство_flex-basis">Свойство <code>flex-basis</code></h3>
+
+<p>Свойство <code>flex-basis</code> определяет размер доступного пространства элемента. Начальное значение этого свойства - <code>auto </code>- в этом случае браузер проверяет, имеют ли элементы размер. В приведенном выше примере все элементы имеют ширину 100px, и этот размер читается браузером как <code>flex-basis</code>.<br>
+ Если элементы не имеют размера, то для размера <code>flex-basis</code> используется размер контента. Вот почему, когда мы просто объявляем <code>display: flex</code> на родительском элементе для создания flex-элементов, все элементы перемещаются в ряд и занимают столько места, сколько им нужно для отображения их содержимого.</p>
+
+<h3 id="Свойство_flex-grow">Свойство <code>flex-grow</code></h3>
+
+<p>With the <code>flex-grow</code> property set to a positive integer, flex items can grow along the main axis from their <code>flex-basis</code>. This will cause the item to stretch and take up any available space on that axis, or a proportion of the available space if other items are allowed to grow too.</p>
+
+<p>If we gave all of our items in the example above a <code>flex-grow</code> value of 1 then the available space in the flex container would be equally shared between our items and they would stretch to fill the container on the main axis.</p>
+
+<p>The flex-grow property can be used to distribute space in proportion. If we give our first item a <code>flex-grow</code> value of 2 and the other items a value of 1, 2 parts will be given to the first item (100px out of 200px in the case of the example above), 1 part each the other two (50px each out of the 200px total).</p>
+
+<h3 id="Свойство_flex-shrink">Свойство <code>flex-shrink</code></h3>
+
+<p>Where the <code>flex-grow</code> property deals with adding space in the main axis, the <code>flex-shrink</code> property controls how it is taken away. If we do not have enough space in the container to lay out our items and <code>flex-shrink</code> is set to a positive integer the item can become smaller than the <code>flex-basis</code>. As with <code>flex-grow</code> different values can be assigned in order to cause one item to shrink faster than others — an item with a higher value set for <code>flex-shrink</code> will shrink faster than its siblings that have lower values.</p>
+
+<p>The minimum size of the item will be taken into account while working out the actual amount of shrinkage that will happen, which means that flex-shrink has the potential to appear less consistent than flex-grow in behavior. We’ll therefore take a more detailed look at how this algorithm works in the article Controlling Ratios of items along the main axis.</p>
+
+<div class="note">
+<p>Note that these values for <code>flex-grow</code> and <code>flex-shrink</code> are proportions. Typically if we had all of our items set to flex: <code>1 1 200px</code> and then wanted one item to grow at twice the rate, we would set that item to flex: <code>2 1 200px</code>. However you could use flex: <code>10 1 200px</code> and flex: <code>20 1 200px</code> if you wanted.</p>
+</div>
+
+<h3 id="Краткая_запись_значений_флекс_свойств">Краткая запись значений флекс свойств</h3>
+
+<p>You will very rarely see the <code>flex-grow</code>, <code>flex-shrink</code>, and <code>flex-basis</code> properties used individually; instead they are combined into the {{cssxref("flex")}} shorthand. The <code>flex</code> shorthand allows you to set the three values in this order — <code>flex-grow</code>, <code>flex-shrink</code>, <code>flex-basis</code>.</p>
+
+<p>The live example below allows you to test out the different values of the flex shorthand; remember that the first value is <code>flex-grow</code>. Giving this a positive value means the item can grow. The second is <code>flex-shrink</code> — with a positive value the items can shrink, but only if their total values overflow the main axis. The final value is <code>flex-basis</code>; this is the value the items are using as their base value to grow and shrink from.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-properties.html", '100%', 510)}}</p>
+
+<p>There are also some predefined shorthand values which cover most of the use cases. You will often see these used in tutorials, and in many cases these are all you will need to use. The predefined values are as follows:</p>
+
+<ul>
+ <li><code>flex: initial</code></li>
+ <li><code>flex: auto</code></li>
+ <li><code>flex: none</code></li>
+ <li><code>flex: &lt;positive-number&gt;</code></li>
+</ul>
+
+<p>Setting <code>flex: initial</code> resets the item to the initial values of Flexbox. This is the same as <code>flex: 0 1 auto</code>. In this case the value of <code>flex-grow</code> is 0, so items will not grow larger than their <code>flex-basis</code> size. The value of <code>flex-shrink</code> is 1, so items can shrink if they need to rather than overflowing. The value of <code>flex-basis</code> is <code>auto</code>. Items will either use any size set on the item in the main dimension, or they will get their size from the content size.</p>
+
+<p>Using <code>flex: auto</code> is the same as using <code>flex: 1 1 auto</code>; everything is as with <code>flex:initial</code> but in this case the items can grow and fill the container as well as shrink if required.</p>
+
+<p>Using <code>flex: none</code> will create fully inflexible flex items. It is as if you wrote <code>flex: 0 0 auto</code>. The items cannot grow or shrink but will be laid out using flexbox with a <code>flex-basis</code> of <code>auto</code>.</p>
+
+<p>The shorthand you often see in tutorials is <code>flex: 1</code> or <code>flex: 2</code> and so on. This is as if you used <code>flex: 1 1 0</code>. The items can grow and shrink from a <code>flex-basis</code> of 0.</p>
+
+<p>Try these shorthand values in the live example below.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/flex-shorthands.html", '100%', 510)}}</p>
+
+<h2 id="Alignment_justification_and_distribution_of_free_space_between_items">Alignment, justification and distribution of free space between items</h2>
+
+<p>A key feature of flexbox is the ability to align and justify items on the main- and cross-axes, and to distribute space between flex items.</p>
+
+<h3 id="align-items"><code>align-items</code></h3>
+
+<p>The {{cssxref("align-items")}} property will align the items on the cross axis.</p>
+
+<p>The initial value for this property is <code>stretch</code> and this is why flex items stretch to the height of the tallest one by default. They are in fact stretching to fill the flex container — the tallest item is defining the height of that.</p>
+
+<p>You could instead set <code>align-items</code> to <code>flex-start</code> in order to make the items line up at the start of the flex container, <code>flex-end</code> to align them to the end, or <code>center</code> to align them in the centre. Try this in the live example — I have given the flex container a height in order that you can see how the items can be moved around inside the container. See what happens if you set the value of align-items to:</p>
+
+<ul>
+ <li><code>stretch</code></li>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/align-items.html", '100%', 520)}}</p>
+
+<h3 id="justify-content"><code>justify-content</code></h3>
+
+<p>The {{cssxref("justify-content")}} property is used to align the items on the main axis, the direction in which <code>flex-direction</code> has set the flow. The initial value is <code>flex-start</code> which will line the items up at the start edge of the container, but you could also set the value to <code>flex-end</code> to line them up at the end, or <code>center</code> to line them up in the centre.</p>
+
+<p>You can also use the value <code>space-between</code> to take all the spare space after the items have been laid out, and share it out evenly between the items so there will be an equal amount of space between each item. To cause an equal amount of space on the right and left of each item use the value <code>space-around</code>. With <code>space-around</code>, items have a half-size space on either end. Or, to cause items to have equal space around them use the value <code>space-evenly</code>. With <code>space-evenly</code>, items have a full-size space on either end.</p>
+
+<p>Try the following values of <code>justify-content</code> in the live example:</p>
+
+<ul>
+ <li><code>flex-start</code></li>
+ <li><code>flex-end</code></li>
+ <li><code>center</code></li>
+ <li><code>space-around</code></li>
+ <li><code>space-between</code></li>
+ <li><code>space-evenly</code></li>
+</ul>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/justify-content.html", '100%', 380)}}</p>
+
+<p>In the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Aligning Items in a Flex Container</a> we will explore these properties in more depth, in order to have a better understanding of how they work. These simple examples however will be useful in the majority of use cases.</p>
+
+<h2 id="Next_steps">Next steps</h2>
+
+<p>After reading this article you should have an understanding of the basic features of Flexbox. In the next article we will look at <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">how this specification relates to other parts of CSS</a>.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/index.html b/files/ru/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..d271a2bd8b
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,124 @@
+---
+title: CSS Flexible Box Layout
+slug: Web/CSS/CSS_Flexible_Box_Layout
+tags:
+  - CSS
+  - CSS Flexible Boxes
+  - CSS Reference
+  - NeedsTranslation
+  - Overview
+  - TopicStub
+translation_of: Web/CSS/CSS_Flexible_Box_Layout
+---
+<p>{{CSSRef}}</p>
+
+<p><strong>Способ CSS раскладки Flexible Box</strong> (CSS Flexible Box Layout или <strong>Flexbox</strong>) — это способ CSS раскладки, означающий <a href="/ru/docs/Web/CSS/CSS_Box_Model">блочную модель CSS</a>, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложеных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.</p>
+
+<h2 id="Базовый_пример">Базовый пример</h2>
+
+<p>В следующем примере контейнер объявлен как <code>display:</code><code>flex</code>, таким образом его три потомка становятся флекс-элементами. Свойству <code>justify-content</code> присвоено значение <code>space-between</code> для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением <code>align-items</code> является <code>stretch</code>. Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+
+
+<h2 id="Reference">Reference</h2>
+
+<h3 id="CSS_Properties">CSS Properties</h3>
+
+<div class="index">
+<ul>
+ <li>{{cssxref("align-content")}}</li>
+ <li>{{cssxref("align-items")}}</li>
+ <li>{{cssxref("align-self")}}</li>
+ <li>{{cssxref("flex")}}</li>
+ <li>{{cssxref("flex-basis")}}</li>
+ <li>{{cssxref("flex-direction")}}</li>
+ <li>{{cssxref("flex-flow")}}</li>
+ <li>{{cssxref("flex-grow")}}</li>
+ <li>{{cssxref("flex-shrink")}}</li>
+ <li>{{cssxref("flex-wrap")}}</li>
+ <li>{{cssxref("justify-content")}}</li>
+ <li>{{cssxref("order")}}</li>
+</ul>
+</div>
+
+<h2 id="Guides">Guides</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">Using CSS flexible boxes</a></dt>
+ <dd>Step-by-step tutorial about how to build layouts using this feature.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Using flexbox to lay out Web applications</a></dt>
+ <dd>Tutorial explaining how to use flexbox in the specific context of Web applications.</dd>
+</dl>
+
+<h2 id="Спецификации">Спецификации</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Спецификация</th>
+   <th scope="col">Статус</th>
+   <th scope="col">Комментарий</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{ SpecName('CSS3 Flexbox') }}</td>
+   <td>{{ Spec2('CSS3 Flexbox') }}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable()}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatGeckoDesktop("20.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>10.0{{property_prefix("-ms")}}<br>
+    11.0</td>
+   <td>12.10</td>
+   <td>6.1{{property_prefix("-webkit")}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatVersionUnknown()}}</td>
+   <td>4.4</td>
+   <td>11</td>
+   <td>12.10</td>
+   <td><span style="font-size: 12px; line-height: 18px;">7.1{{property_prefix("-webkit")}}</span></td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
new file mode 100644
index 0000000000..0df3168e3a
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
@@ -0,0 +1,100 @@
+---
+title: Разбираемся с обёртыванием Flex элементов
+slug: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+tags:
+  - CSS
+  - Flex
+  - flexbox
+  - grid
+  - сворачивание элементов
+  - флекс
+  - флексбокс
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Flexbox был разработан как однонаправленный макет, то есть он подразумевает укладывание элементов либо в строчку, либо в столбец, но не одновременно и то и другое. Тем не менее, есть возможность завернуть элементы в несколько строк, создавая новые строки. Это делается с помощью установки свойства {{cssxref("flex-direction")}} (flex-направление) в значение <code>row</code> (строки) или создавая новые столбцы, устанавливая свойство <code>flex-direction</code> в значение <code>column</code> (столбец). В этой статье я объясню, как это работает, зачем это придумали и в каких случаях лучше использовать технологию <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> вместо флекс-боксов.</p>
+
+<h2 id="Делаем_вещи_завёрнутыми">Делаем вещи завёрнутыми</h2>
+
+<p>Значение по умолчанию свойства {{cssxref("flex-wrap")}} равняется <code>nowrap</code>. Это обозначает, что если у вас есть набор флекс-элементов, которые слишком широки для их контейнера, то они будут его переполнять. Если вы хотите, чтобы они переносились на следующую строку (или столбец, если у вас вертикально расположена основная ось) при переполнении, вы должны добавить свойство <code>flex-wrap</code> и установить ему значение <code>wrap</code>, или использовать сокращённую запись свойства {{cssxref("flex-flow")}} со значениями <code>row wrap</code> или <code>column wrap</code> соответственно для строк и столбцов.</p>
+
+<p>Тогда элементы будут переноситься внутри контейнера. В следующем примере у нас есть 10 элементов с <code>flex-basis</code> равным <code>160px</code> и способностью расти и сжиматься. Как только в первой строке мы попадаем в то место, когда нет возможности поместить ещё один элемент с размером 160 px, создаётся новая строка для этого элемента и так будет повторяться, пока не поместятся все элементы.Так как элементы могут расти, то их размер станет больше, чем 160px в том случае, когда все строки полностью заполнятся. Если на последней строке останется только один элемент, то он расширится до ширины всей строки.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-wrap.html", '100%', 650)}}</p>
+
+<p>То же самое будет происходить с колонками. Содержащему контейнеру надо задать высоту, чтобы элементы начали переноситься в следующую колонку. И высота элементов тоже будет увеличиваться, чтобы заполнить колонку по высоте полностью.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/column-wrap.html", '100%', 810)}}</p>
+
+<h2 id="Перенос_и_направление_flex-direction">Перенос и направление (flex-direction)</h2>
+
+<p>Перенос работает, что логично ожидать, и в паре со свойством <code>flex-direction</code>. Если <code>flex-direction</code> установлен в <code>row-reverse</code>, тогда элементы начнут укладываться с конечного края контейнера и будут идти в обратном порядке.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/row-reverse-wrap.html", '100%', 750)}}</p>
+
+<p>Обратите внимание, что обратный порядок относится только к строке (в случае построчного заполнения). Элементы начнут заполнять справа налево, затем перейдут на вторую строку и опять начнут справа. Не будет реверса сразу по обеим осям - строки не будут заполняться вверх!</p>
+
+<h2 id="Объяснение_одномерного_макета">Объяснение одномерного макета</h2>
+
+<p>Как мы уже видели в предыдущих примерах, если нашим элементам разрешено расти и сжиматься, то появляются несколько элементов в последней строке или столбце, которые расширяются, чтобы заполнить всё оставшееся пространство.</p>
+
+<p>В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.</p>
+
+<p>Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимумальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми стоблцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>
+
+<p>В этом разница между одно- и двух -мерной компоновкой. В одномерном методе, таком как флексбокс, мы контролируем только одно измерение - либо строки, либо столбцы. В двумерном макете, таком как grid, мы контролируем сразу оба измерения. Если вы хотите распределение пространства построчно, используйте flexbox. Если не хотите - используйте Grid.</p>
+
+<h2 id="Как_работают_грид-системы_на_основе_flexbox">Как работают грид-системы на основе flexbox?</h2>
+
+<p>Как правило, grid системы на основе flexbox работают, возвращая flexbox к привычному миру разметок на основе float. Если вы назначите процентную ширину для элементов Flex - либо задав значение параметру <code>flex-basis</code>, либо добавив ширину к самому элементу, при этом оставив значение <code>flex-basis</code> как <code>auto</code> - вы можете создать впечатление двухмерного макета. Вы можете посмотреть, как это работает на примере ниже.</p>
+
+<p>Здесь я установил <code>flex-grow</code> и <code>flex-shrink</code> на <code>0</code>, чтобы запретить flex элементам расти и сжиматься, а затем контролирую их размер с помощью процентов, как мы это делали в макетах с float.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/flex-grid.html", '100%', 650)}}</p>
+
+<p>Если вам нужно, чтобы flex элементы выровнялись по поперечной оси, такой способ управления шириной позволит этого добиться. Тем не менее, в большинстве случаев, добавление параметра ширины непосредственно в сам flex элемент говорит о том, что возможно будет лучше, если вы переключитесь на технологию grid layout для этого компонента макета.</p>
+
+<h2 id="Создание_промежутков_между_элементами">Создание промежутков между элементами</h2>
+
+<p>При размещении flex элементов периодически возникает необходимость их разнести между собой. На данный момент у нас нет никакого решения задачи создания промежутков между элементами flexbox в пределах спецификации <a href="https://www.w3.org/TR/css-align-3/">Box Alignment module</a>. В будущем мы сможем просто использовать <code>row-gap</code> и <code>column-gap</code> для флексбоксов так же, как мы это делаем для CSS Grid макетов. Но пока всё что мы можем сделать - это использовать margin для достижения этой цели.</p>
+
+<p>Как вы можете видеть на живом примере ниже, попытки создать промежутки между элементами, при этом не создавая промежутки с границами содержащего контейнера, приводят к тому, что нам приходится использовать отрицательные маржины для самого контейнера. Любая граница в flex контейнере затем перемещается во вторую оболочку, чтобы отрицательное поле могло вытянуть элементы до этого элемента оболочки.</p>
+
+<p>Вот поэтому, когда всё-таки реализуют свойство gap, это решит проблему с промежутками. Потому что это свойство будет действовать только на промежутки между элементами, не затрагивая промежутки между элементом и содержащим контейнером.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/gaps.html", '100%', 830)}}</p>
+
+<h2 id="Сворачивание_элементов">Сворачивание элементов</h2>
+
+<p>В спецификации флексбоксов подробно рассказано, что должно происходить, когда элементы должны сворачиваться при установке параметра <code>visibility: collapse</code> на элементе. Смотрим документацию MDN для параметра {{cssxref("visibility")}}. Спецификация описывает поведение так:</p>
+
+<blockquote>
+<p>“Установка visibility:collapse на flex элементе должна сворачивать этот flex элемент. Этот эффект должен быть таким же, как при установке свойства visibility:collapse на элементе table-row или table-column: свёрнутый flex элемент полностью удаляется из процесса рендеринга, но оставляет за собой некую "распорку", которая сохраняет стабильным поперечный размер flex-строки. Таким образом, если флекс-контейнер имеет только одну строку, динамическое сворачивание или разворачивание элементов может изменять основной размер флекс-контейнера, но должно быть гарантированно, что не будет изменяться поперечный размер и не будет приводить к эффекту "виляния" всего макета страницы.  Однако процесс обертывания flex-строки выполняется после процедуры сворачивания, поэтому поперечный размер flex-контейнера с несколькими строками может и изменяться.” - <a href="https://www.w3.org/TR/css-flexbox-1/#visibility-collapse">Сворачивание элементов</a></p>
+</blockquote>
+
+<p>Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.</p>
+
+<p>В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр <code>visibility: collapse</code>. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите <code>visibility: collapse</code> из CSS или измените значение на <code>visible</code>, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свернутыми элементами; высота флекс-контейнера при этом не изменится.</p>
+
+<div class="note">
+<p>Примечание. Используйте Firefox для двух приведенных ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}</p>
+
+<p>Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит <em>после</em> сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свернутым элементом в главной оси.</p>
+
+<p>Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.</p>
+
+<p>Я создал пример такого поведения в следующем живом примере. Вы можете увидеть, как растяжение меняет строку в зависимости от расположения свернутого элемента. Если вы добавите больше контента ко второму элементу, он изменит строку, как только станет достаточно длинным. Эта верхняя строка становится такой же высокой, как одна строка текста.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}</p>
+
+<p>Если это вызывает проблемы для вашего макета, возможно Вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.</p>
+
+<h3 id="Разница_между_visibility_hidden_и_display_none">Разница между <code>visibility: hidden</code> и <code>display: none</code></h3>
+
+<p>Когда Вы устанавливаете элементу <code>display: none</code> чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счетчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование <code>visibility: hidden</code> сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведет себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..20d43c2b28
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,378 @@
+---
+title: Используем CSS Flexible Boxes
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>Эта статья устарела и удалена из английской версии. Вместо неё идёт перенаправление на статью:
+<h1 id="Основные_понятия_Flexbox"><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Основные понятия Flexbox</a></h1>
+
+
+
+<p>У меня не поднялась рука удалить эту статью окончательно, но я рекомендую Вам вместо неё, всё-таки, прочитать ту.</p>
+</div>
+
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS3 <strong>Flexible Box</strong>, или просто <strong>flexbox</strong> — это режим разметки, созданный для упорядочения элементов на странице таким образом, чтобы они вели себя предсказуемо в случаях, когда разметка страницы адаптирована под различные размеры экрана и устройства.</span> Во многих случаях флексбоксы лучше блочной модели разметки, поскольку не использует обтекания (floats) и не выполняет схлопывание отступлений flex-контейнера и его содержимого (margin collapse).</p>
+
+<p>Для многих дизайнеров модель использования флексбоксов будет более простой для применения. Дочерние элементы внутри флексбокса могут размещаться в любом направлении и могут менять размер, чтобы адаптироваться к различным размерам дисплея. Позиционирование элементов в таком случае является простым и комплексная разметка достигается значительно легче и с более чистым кодом, поскольку порядок отображения элементов не связан с их порядком в коде. Эта независимость умышленно касается только визуального рендеринга, оставляя порядок интерпретации и навигацию зависимыми от порядка в исходниках.</p>
+
+<div class="note"><strong>Внимание:</strong> некоторые браузеры все еще могут частично или полностью не поддерживать флексбоксы. Ознакомьтесь с <a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes#Совместимость_с_браузерами">таблицей совместимости</a>.</div>
+
+<h2 id="Концепция_Flexbox">Концепция Flexbox</h2>
+
+<p>Главной концепцией Flexbox есть возможность изменения высоты и/или ширины его элементов, чтобы лучше заполнять пространство любого дисплея. Flex-контейнер увеличивает элементы, чтобы заполнить доступное пространство или уменьшает чтобы предотвратить перекрытие.</p>
+
+<p>Алгоритм разметки флексбоксами агностичено направлен в противовес блочной разметке, которая ориентирована строго вертикально, или горизонтально-ориентированной инлайн-разметке. Несмотря на то что разметка блоками хорошо подходит для страницы, ей не хватает объективного механизма для поддержки компонентов, которые должны менять ориентацию, размеры а также растягиваться или сжиматься при изменениях размера экрана, изменении ориентации с вертикальной на горизонтальную и так далее. Разметка флексбоксами наиболее желательна для компонентов приложения и шаблонов, которые мало масштабируются, тогда как grid-разметка создана для больших шаблонов. Обе технологии являются частью разработки CSS Working Group которая должна способствовать совместимости web-приложений с различными браузерами, режимами а также большей гибкости.</p>
+
+<h2 id="Терминология">Терминология</h2>
+
+<p>Поскольку описание флексбоксов не включает таких словосочетаний, как горизонтальная / inline и вертикальная / block оси, объяснение модели предусматривает новую терминологию. Используйте следующую диаграмму при просмотре словаря терминов. Она изображает flex-контейнер, имеющий flex-направление ряда, что означает, что каждый flex item расположен горизонтально, друг за другом по главной оси (main axis) в соответствии с установленным направлением написания текста элемента. Слева направо в данном случае.</p>
+
+<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png"></p>
+
+<dl>
+ <dt>Flex-контейнер</dt>
+ <dd>Родительский элемент, в котором содержатся flex-элементы. Flex-контейнер определяется установкой свойства {{Cssxref("display")}} в <code>flex</code> или <code>inline-flex</code>.</dd>
+ <dt>Flex-элемент, flex item</dt>
+ <dd>
+ <p>Каждый дочерний элемент flex-контейнера становится flex-элементом. Текст, который напрямую содержится в flex-контейнере, оборачивается анонимным flex-элементом.</p>
+ </dd>
+ <dt>Оси</dt>
+ <dd>
+ <p>Каждый flexible-бокс шаблон строится по двум осям. Главная ось <strong>(main axis)</strong> — это ось, вдоль которой flex-элементы следуют один за другим, а перекрёстная ось <strong>(cross axis)</strong> перпендикулярна ей.</p>
+
+ <ul>
+  <li>Свойство <code>{{Cssxref("flex-direction")}}</code> устанавливает главную ось.</li>
+  <li>Свойство <code>{{Cssxref("justify-content")}}</code> определяет расположение элементов вдоль главной оси в текущем ряду.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/align-items"><code>align-items</code></a> расположение элементов вдоль перекрёстной оси в текущем ряду.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/align-self"><code>align-self</code></a> устанавливает, как отдельный flex-элемент выровнен по перекрёстной оси, переопределяя значения, установленные с помощью <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Направления</dt>
+ <dd>
+ <p>Главное начало и конец (<strong>main</strong>) и перекрёстное начало и конец (<strong>cross start</strong>/<strong>end</strong>) — это стороны контейнера, определяющие начало и окончание потока flex-элемментов. Они следуют по главной и перекрестной осями flex-контейнера в векторе, установленном режимом написания ({{Cssxref("writing-mode")}}) (слева направо, справа налево и т. д.).</p>
+
+ <ul>
+  <li>Свойство {{Cssxref("order")}} присваивает элементы порядковым группам и определяет, в каком порядке их показывать.</li>
+  <li>Свойство {{Cssxref("flex-flow")}} — это короткая форма, состоящая из свойств {{Cssxref("flex-direction")}} и {{Cssxref("flex-wrap")}}, определяющих расплолжение элементов.</li>
+ </ul>
+ </dd>
+ <dt>Линии</dt>
+ <dd>
+ <p>Flex-элементы могут размещаться на одной или нескольких линиях в зависимости от значения свойства {{Cssxref("flex-wrap")}}, которое контролирует направление перекрестных линий и направление в котором складываются новые линии.</p>
+ </dd>
+ <dt>Размеры</dt>
+ <dd>
+ <p>Флекс элементы агностически эквивалентны высоте и ширине <strong>главного размера</strong> и <strong>поперечного размера,</strong> которые равны, соответственно,  главной оси (main axis) и поперечной оси (cross axis) флекс-контейнера.</p>
+
+ <ul>
+  <li>Свойства <code><a href="/ru/docs/Web/CSS/min-height">min-height</a></code> и <code><a href="/ru/docs/Web/CSS/min-width">min-width</a></code> принимают значение по-умолчанию 0.</li>
+  <li>Свойство <a href="/ru/docs/Web/CSS/flex"><code>flex</code></a> - это сокращённая запись свойств <a href="/ru/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <code><a href="/ru/docs/Web/CSS/flex-shrink">flex-shrink</a> и</code> <code><a href="/ru/docs/Web/CSS/flex-basis">flex-basis</a>.</code></li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Делаем_элемент_флексбоксом">Делаем элемент флексбоксом</h2>
+
+<p>Чтобы сделать элемент flexible-боксом, укажите значение {{cssxref("display")}} следующим образом:</p>
+
+<pre class="brush: css">display: flex</pre>
+
+<p>или</p>
+
+<pre class="brush: css">display: inline-flex</pre>
+
+<p>Таким образом мы определяем элемент как флексбокс, а его дочерниие элементы — как flex-элементы. Значение <code>flex</code> делает контейнер блочным элементом, а <code>inline-flex</code> значение превращает его в инлайн-элемент.</p>
+
+<div class="note"><span class="notranslate"><strong>Внимание</strong></span><strong>:</strong> для <span class="notranslate">указания префикса вендора, добавьте строку в значение атрибута, а не к самому атрибуту</span>. <span class="notranslate">Например</span>, <code>display: -webkit-flex</code>.</div>
+
+<h2 id="Рассмотрим_flex-элементы">Рассмотрим flex-элементы</h2>
+
+<p>Текст, который содержится непосредственно внутри flex-контейнера, автоматически оборачивается анонимным flex-элементом. Однако, анонимный flex-элемент, содержащий только пробелы, не отображается (как будто было указано значение <code>display: none</code>).</p>
+
+<p>Абсолютно позиционированные дочерние элементы flex-контейнера позиционируются так, что их статическое положение определяется относительно главного начального угла содержащего их flex-контейнера.</p>
+
+<p>Отступы (margin) соседних flex-контейнеров не схлопываются. Установка значений <code>margin: auto </code>поглощает дополнительное место в вертикальном или горизонтальном направлении и может быть использовано для выравнивания или для разделения соседних flex-элементов. См. <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">Выравнивание при помощи 'автоматических' отступов </a>в разделе "Модель расположения при помощи flex-контейнеров" спецификации W3C.</p>
+
+<p>Свойства выравнивания flexbox выполняют "истинное" центрирование в отличие от других способов центрирования в CSS. Это означает, что flex-элементы будут оставаться отцентрированными даже если они переполняют flex-контейнер. Впрочем, это может иногда быть проблематичным, если они вылезают за верхний или левый край страницы (в языках с написанием слева направо; в языках с написанием справа налево, таких как арабский, возникает проблема с правой границей), так как вы не можете прокрутить страницу в данную область даже если там есть содержимое! В будущем релизе свойства выравнивания будут также дополнены "безопасной" опцией. На данный момент, если это проблема, вы можете использовать отступы (margin) для достижения центрирования, так как они сработают "безопасно" и центрирование будет прекращено при переполнении. Вместо использования свойства <code>align- </code>просто установите автоматические отступы (<code>margin: auto)</code> для flex-элементов, которые вы хотите отцентрировать. Вместо свойств <code>justify-</code> установите <code>margin: auto</code> на внешние края первого и последнего элемента в flex-контейнере. Автоматические отступы будут "подстраиваться" и занимать оставшееся место, центрируя flex-элементы при наличии свободного места и используя стандартное выравнивание при его отсутствии. Тем не менее, если вы пытаетесь заменить <code>justify-content </code>центрированием, основанным на отступах (margin-based) в многострочном flexbox, вам, видимо, не повезло, так как вам необходимо установить отступы для первого и последнего элемента на каждой строке. Если вы не можете предугадать заранее на какой строке окажется каждый элемент, вы не сможете надежно использовать центрирование, основанное на отступах, на основной оси для замены свойства <code>justify-content</code>.</p>
+
+<p>Помните, что, несмотря на то, что порядок отображения элементов не зависит от их положения в исходном коде, эта независимость затрагивает только визуальное отображение, оставляя навигацию и голосовую помощь в исходном порядке. Даже свойство {{cssxref("order")}} не влияет на очередность голосовой помощи и навигации. Таким образом, разработчики должны уделять внимание правильному порядку элементов в исходном коде, чтобы не навредить доступности документа.</p>
+
+<h2 id="Свойства_Flexbox">Свойства Flexbox</h2>
+
+<h3 id="Свойства_не_влияющие_на_Flexbox">Свойства, не влияющие на Flexbox</h3>
+
+<p>Так как flexbox используют другой алгоритм расположения, некоторые свойства не имеют смысла для flex-контейнера:</p>
+
+<ul>
+ <li>свойства <code>column-*</code> <a href="/ru/docs/Web/Guide/CSS/Using_multi-column_layouts">модуля с множественными столбцами</a> не влияет на flex-элементы.</li>
+ <li>{{cssxref("clear")}} не действует на flex-элементах.</li>
+ <li>{{cssxref("float")}} заставляет свойство элемента <code>display</code> считаться как <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} не оказывает эффекта на выравнивание flex-элементов.</li>
+</ul>
+
+<h2 id="Пример">Пример</h2>
+
+<h3 id="Типичный_пример_flex">Типичный пример flex</h3>
+
+<p>Типичный пример показывает как применять "flex-эффект" к элементам и как соседние элементы ведут себя в состоянии flex.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    .flex {
+        /* basic styling */
+        width: 350px;
+        height: 200px;
+        border: 1px solid #555;
+        font: 14px Arial;
+
+        /* flexbox setup */
+        display: flex;
+        flex-direction: row;
+    }
+
+    .flex &gt; div {
+        flex: 1 1 auto;
+        width: 30px; /* To make the transition work nicely. (Transitions to/from
+                        "width:auto" are buggy in Gecko and Webkit, at least.
+                        See http://bugzil.la/731886 for more info.) */
+        transition: width 0.7s ease-out;
+    }
+
+    /* colors */
+    .flex &gt; div:nth-child(1){ background: #009246; }
+    .flex &gt; div:nth-child(2){ background: #F1F2F1; }
+    .flex &gt; div:nth-child(3){ background: #CE2B37; }
+
+    .flex &gt; div:hover {
+        width: 200px;
+    }
+
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;p&gt;Flexbox nuovo&lt;/p&gt;
+    &lt;div class="flex"&gt;
+      &lt;div&gt;uno&lt;/div&gt;
+      &lt;div&gt;due&lt;/div&gt;
+      &lt;div&gt;tre&lt;/div&gt;
+    &lt;/div&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h3 id="Пример_расположения_Священный_Грааль">Пример расположения "Священный Грааль"</h3>
+
+<p>Данный пример показывает как flexbox предоставляет возможность динамически изменять расположение для различных разрешений экрана. Следующая схема иллюстрирует преобразование.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Здесь изображен случай, когда расположение, подходящее для окна браузера должно быть оптимизировано для экрана смартфона. Не только элементы должны уменьшиться в размере, но и порядок, в котором они отображаются, должен измениться. Flexbox сильно упрощает это.</p>
+
+<pre class="brush: html">​&lt;!DOCTYPE html&gt;
+&lt;html lang="en"&gt;
+  &lt;head&gt;
+    &lt;style&gt;
+    body {
+        font: 24px Helvetica;
+        background: #999999;
+    }
+
+    #main {
+        min-height: 800px;
+        margin: 0px;
+        padding: 0px;
+        display: flex;
+        flex-flow: row;
+    }
+
+    #main &gt; article {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #cccc33;
+        border-radius: 7pt;
+        background: #dddd88;
+        flex: 3 1 60%;
+        order: 2;
+    }
+
+    #main &gt; nav {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 1;
+    }
+
+    #main &gt; aside {
+        margin: 4px;
+        padding: 5px;
+        border: 1px solid #8888bb;
+        border-radius: 7pt;
+        background: #ccccff;
+        flex: 1 6 20%;
+        order: 3;
+    }
+
+    header, footer {
+        display: block;
+        margin: 4px;
+        padding: 5px;
+        min-height: 100px;
+        border: 1px solid #eebb55;
+        border-radius: 7pt;
+        background: #ffeebb;
+    }
+
+    /* Too narrow to support three columns */
+    @media all and (max-width: 640px) {
+        #main, #page {
+            flex-direction: column;
+        }
+
+        #main &gt; article, #main &gt; nav, #main &gt; aside {
+        /* Return them to document order */
+            order: 0;
+        }
+
+        #main &gt; nav, #main &gt; aside, header, footer {
+            min-height: 50px;
+            max-height: 50px;
+        }
+    }
+    &lt;/style&gt;
+  &lt;/head&gt;
+  &lt;body&gt;
+    &lt;header&gt;header&lt;/header&gt;
+    &lt;div id='main'&gt;
+      &lt;article&gt;article&lt;/article&gt;
+      &lt;nav&gt;nav&lt;/nav&gt;
+      &lt;aside&gt;aside&lt;/aside&gt;
+    &lt;/div&gt;
+    &lt;footer&gt;footer&lt;/footer&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+<h2 id="Песочница">Песочница</h2>
+
+<p>Существует несколько песочниц с flexbox, доступных онлайн для экспериментов:</p>
+
+<ul>
+ <li><a href="http://demo.agektmr.com/flexbox/">Flexbox Playground</a></li>
+ <li><a href="http://the-echoplex.net/flexyboxes">Flexy Boxes</a></li>
+ <li><a href="http://codepen.io/justd/pen/yydezN">Flexbox Properties Demonstration</a></li>
+ <li><a href="http://flexboxfroggy.com/">Flexbox Froggy</a></li>
+</ul>
+
+<h2 id="О_чем_нужно_помнить">О чем нужно помнить</h2>
+
+<p>Алгоритм, описывающий как flex-элементы располагаются, иногда может быть довольно запутанным. Вот несколько правильных решений, которые позволят избежать неприятных сюрпризов при верстке с использованием flexbox.</p>
+
+<p>Flexbox располагаются в соответствие с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/writing-mode">направлением письма</a>, что означает, что <strong>главное начало</strong> и <strong>главный конец </strong>располагаются в зависимости от положения <strong>начала </strong>и <strong>конца </strong>(строки - <em>прим.</em>).</p>
+
+<p><strong>Перекрестное начало</strong> и <strong>перекрестный конец </strong>полагаются на определение позиции <strong>начала </strong>и <strong>конца, </strong>которое зависит от значения свойства <code>{{cssxref("direction")}}</code>.</p>
+
+<p>Разрывы страницы допустимы в расположении flex-контейнеров, когда это позволяет свойство <code>break-. Свойства </code>CSS3 <code>break-after</code>, <code>break-before</code> и <code>break-inside</code>, а также свойства CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code> и <code>page-break-inside</code> работают на flex-контейнере, flex-элементах, а также внутри flex-элементов.</p>
+
+<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox (Gecko)</th>
+   <th>Chrome</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoDesktop("18.0")}}<sup>[6]</sup>{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoDesktop("22.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10{{property_prefix("-webkit")}}<sup>[5]</sup></td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoDesktop("28.0")}}</td>
+   <td>21.0{{property_prefix("-webkit")}}<br>
+    29.0</td>
+   <td>11<sup>[3]</sup></td>
+   <td>12.10<sup>[5]</sup><br>
+    15 {{property_prefix("-webkit")}}</td>
+   <td>6.1{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>Android</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support (single-line flexbox)</td>
+   <td>{{CompatGeckoMobile("18.0")}}{{property_prefix("-moz")}}<sup>[2]</sup><br>
+    {{CompatGeckoMobile("22.0")}}</td>
+   <td>
+    <p>1.0{{property_prefix("-moz")}}<sup>[2]</sup><br>
+     1.1</p>
+   </td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+  <tr>
+   <td>Multi-line flexbox</td>
+   <td>{{CompatGeckoMobile("28.0")}}</td>
+   <td>1.3</td>
+   <td>2.1{{property_prefix("-webkit")}}<sup>[4]</sup><br>
+    4.4</td>
+   <td>11</td>
+   <td>12.10<sup>[5]</sup><br>
+    15{{property_prefix("-webkit")}}</td>
+   <td>7{{property_prefix("-webkit")}}<sup>[1]</sup></td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>[1] Safari до версии 6.0 (iOS.1) поддерживал старую несовместимую черновую версию спецификации. Safari 6.1 (и Safari на iOS 7) был обновлен для поддержки финальной версии.</p>
+
+<p>[2] До Firefox 22, чтобы активировать поддержку flexbox, пользователь должен установить параметр <code>about:config</code> <code>layout.css.flexbox.enabled</code> в значение <code>true</code>. Начиная с Firefox 22 по Firefox 27, параметр установлен в <code>true</code> по умолчанию, и полностью исключен в Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 поддерживает старую несовместимую черновую версию спецификации; Internet Explorer 11 <a href="https://msdn.microsoft.com/ru-ru/library/dn265027(v=vs.85).aspx">был обновлен</a> для поддержки финальной версии.</p>
+
+<p>[4] Android browser до версии 4.3 поддерживал старую несовместимую черновую версию спецификации. Android 4.4 был обновлен для поддержки финальной версии.</p>
+
+<p>[5] Хотя изначальная реализация в Opera 12.10 <code>flexbox</code> была без приставки, она получила приставку {{property_prefix("-webkit")}} в версиях с 15 по 16 Opera и с 15 по 19 Opera Mobile. Приставка была снова убрана в Opera 17 и Opera Mobile 24.</p>
+
+<p>[6] До Firefox 29, <code>установка visibility: collapse</code> для flex-элемента заставляет его обрабатываться как <code>display: none</code> вместо предполагаемого поведения, обрабатывающего его как <code>visibility: hidden</code>. Предложенное решение - использовать <code>visibility:hidden</code> для flex-элементов, которые должны вести себя как при установленном <code>visibility:collapse</code>. Для большей информации, см {{bug(783470)}}.</p>
+
+<h2 id="См._также">См. также</h2>
+
+<ul>
+ <li><a href="https://github.com/philipwalton/flexbugs">Проект Flexbugs </a>для информации о багах в браузерных реализациях flexbox.</li>
+</ul>
diff --git a/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html b/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html
new file mode 100644
index 0000000000..9fe0b2932f
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/выравнивание_элементов_в_flex_контейнере/index.html
@@ -0,0 +1,213 @@
+---
+title: Выравнивание элементов во Flex контейнере
+slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
+---
+<p>{{CSSRef}}</p>
+
+<p class="summary">Одной из причин быстрого роста популярности flexbox среди веб-разработчиков было то, что впервые были предоставлены адекватные возможности выравнивания. Он предоставил адекватное вертикальное выравнивание, и стало возможным, наконец, легко поместить элемент в центр по вертикали. В этом руководстве детально рассматривается, как выравнивание и распределение работают во Flexbox.</p>
+
+<p>Для центрирования элемента по перекрёстной оси (в данном случае - вертикальной) используется свойство <code>align-items</code>. Для центрирования элемента по главной оси (в данном случае - горизонтально), используется свойство <code>justify-content</code>.</p>
+
+<p><img alt="A containing element with another box centered inside it." src="https://mdn.mozillademos.org/files/15627/align1.png" style="display: block; height: 357px; margin: 0px auto; width: 616px;"></p>
+
+
+
+<p>На примере ниже можно изменить размер контейнера или вложенного элемента, но элемент всегда останется по центру.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/intro.html", '100%', 700)}}</p>
+
+<h2 id="Свойства_управления_выравниванием">Свойства управления выравниванием</h2>
+
+<p>В этом руководстве рассматриваются следующие свойства:</p>
+
+<ul>
+ <li>{{cssxref("justify-content")}} — управляет выравниванием элементов по главной оси.</li>
+ <li>{{cssxref("align-items")}} — управляет выравниванием элементов по перекрёстной оси.</li>
+ <li>{{cssxref("align-self")}} — управляет выравниванием конкретного flex элемента по перекрёстной оси.</li>
+ <li>{{cssxref("align-content")}} — описывается в спецификации как “упаковка flex строк”; управляет промежутками между flex строками по перекрёстной оси.</li>
+</ul>
+
+<p>Также будет рассмотрены авто-отступы для выравнивания элементов во flexbox.</p>
+
+<div class="note">
+<p><strong>Замечание</strong>: Свойства выравнивания во Flexbox помещены в отдельную спецификацию — <a href="https://www.w3.org/TR/css-align-3/">CSS Box Alignment Level 3</a>. Ожидается, что данная спецификация в конце концов заменит свойства, определённые во Flexbox Level One.</p>
+</div>
+
+<h2 id="Перекрёстная_ось">Перекрёстная ось</h2>
+
+<p>Свойства <code>align-items</code> и <code>align-self</code> управляют выравниванием flex элементов по перекрёстной оси: вертикальной для <code>flex-direction</code> установленным в <code>row,</code> и горизонтальной для <code>flex-direction</code> установленным в <code>column</code>.</p>
+
+<p>Рассмотрим выравнивание по перекрёстной оси на простейшем примере. Если установить <code>display: flex</code> у контейнера, все дочерние элементы становятся flex элементами, выстроенными в ряд. Все они по вертикали примут размер самого высокого элемента, который станет определяющим вертикального размера. Если у flex контейнера задана высота, то все элементы растянутся до высоты контейнера, независимо от размера содержимого.</p>
+
+<p><img alt="Three items, one with additional text causing it to be taller than the others." src="https://mdn.mozillademos.org/files/15628/align2.png" style="display: block; height: 131px; margin: 0px auto; width: 509px;"></p>
+
+<p><img alt="Three items stretched to 200 pixels tall" src="https://mdn.mozillademos.org/files/15629/align3.png" style="display: block; height: 207px; margin: 0px auto; width: 637px;"></p>
+
+<p>Все элементы становятся одной высоты, т.к. по умолчанию свойство <code>align-items</code> имеет значение <code>stretch</code>.</p>
+
+<p>Другие возможные значения свойства:</p>
+
+<ul>
+ <li><code>align-items: flex-start</code></li>
+ <li><code>align-items: flex-end</code></li>
+ <li><code>align-items: center</code></li>
+ <li><code>align-items: stretch</code></li>
+ <li><code>align-items: baseline</code></li>
+</ul>
+
+<p>В примере ниже значение свойств <code>align-items</code> установлено в <code>stretch</code>. Попробуйте другие значения для понимания их действия.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-items.html", '100%', 520)}} </p>
+
+<h3 id="Выравнивание_одного_элемента_при_помощи_align-self">Выравнивание одного элемента при помощи <code>align-self</code></h3>
+
+<p>Свойство <code>align-items </code>устанавливает <code>align-self</code> для всех flex элементов как для группы. Это означает, что можно явно указать значение <code>align-self</code> для конкретного элемента. Свойство <code>align-self</code> может принимать все те же значения, что и свойство <code>align-items, </code>а так же значение <code>auto</code>, которое сбросит значение, установленное в flex контейнере.</p>
+
+<p>В следующем примере, у flex контейнера установлено <code>align-items: flex-start</code>, означающее, что все элементы будут выравнены по началу перекрёстной оси. У первого элемента с помощью <code>first-child</code> селектора установлено <code>align-items: stretch</code>; у следующего элемента с классом <code>selected</code> установлено <code>align-self: </code><code>center</code>. Можно изменять значение <code>align-items</code> на контейнере или <code>align-self</code> на элементе для изучения их работы.8н</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self.html", '100%', 650)}} </p>
+
+<h3 id="Изменение_основной_оси">Изменение основной оси</h3>
+
+<p>До сего момента мы изучали поведение при <code>flex-direction</code> установленном в <code>row</code>, в языке, использующем написание сверху вниз. Это означает, что основная ось идёт горизонтально, а выравнивание по перекрёстной оси сдвигает элементы вверх или вниз.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the vertical axis." src="https://mdn.mozillademos.org/files/15630/align4.png" style="display: block; height: 204px; margin: 0px auto; width: 671px;"></p>
+
+<p>Если изменить <code>flex-direction</code> на column, <code>align-items</code> и <code>align-self</code> будут сдвигать элементы влево или вправо.</p>
+
+<p><img alt="Three items, the first aligned to flex-start, second to center, third to flex-end. Aligning on the horizontal axis." src="https://mdn.mozillademos.org/files/15631/align5.png" style="display: block; height: 239px; margin: 0px auto; width: 687px;"></p>
+
+<p>Можно попробовать пример ниже, где установлено <code>flex-direction: column</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-self-column.html", '100%', 730)}} </p>
+
+<h2 id="Выравнивание_содержимого_по_перекрёстной_оси_—_свойство_align-content">Выравнивание содержимого по перекрёстной оси — свойство align-content</h2>
+
+<p>До сих пор мы выравнивали элементы внутри flex-контейнера. Если содержимое вашего flex контейнера переносится на несколько строк, используйте свойство <code>align-content</code> для управления свободным пространством между строками. В спецификации это описано как <a href="https://drafts.csswg.org/css-flexbox/#align-content-property">упаковка flex-строк</a>.</p>
+
+<p>Чтобы свойство <code>align-content</code> работало, необходимо, чтобы в flex-контейнере было больше места, что требуется для отображения всего содержимого. Оно применяется ко всем элементам как группе, и управляет распределением свободного места и положением всей группы элементов внутри контейнера.</p>
+
+<p>Свойство <code>align-content</code> принимает следующие значения:</p>
+
+<ul>
+ <li><code>align-content: flex-start</code></li>
+ <li><code>align-content: flex-end</code></li>
+ <li><code>align-content: center</code></li>
+ <li><code>align-content: space-between</code></li>
+ <li><code>align-content: space-around</code></li>
+ <li><code>align-content: stretch</code></li>
+ <li><code>align-content: space-evenly</code> (не описано в спецификации Flexbox)</li>
+</ul>
+
+<p>В примере ниже flex контейнер имеет высоту 400 пикселей - больше, чем необходимо для отображения всех элементов. Значение <code>align-content</code> установлено в <code>space-between</code>, означающее, что свободное пространство разделено <em>между</em> строками, расположенными вплотную к началу и концу контейнера по перекрёстной оси.</p>
+
+<p>Попробуйте другие значения <code>align-content</code> для понимания принципа их работы.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content.html", '100%', 850)}} </p>
+
+<p>Также можно сменить значение <code>flex-direction</code> на <code>column</code> и увидеть, как наше свойство работает в режиме колонок. Как и ранее, что увидеть работу свойства, у контейнера должно быть больше свободного места, чем требуется содержимому.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}} </p>
+
+<div class="note">
+<p><strong>Замечание</strong>: значение <code>space-evenly</code> не определено в спецификации flexbox и добавлено позже в спецификацию Box Alignment. Поддержка браузерами этого значение не так широка, как значений определённым в спецификации flexbox.</p>
+</div>
+
+<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content">документации по <code>justify-content</code> на MDN</a> приведено больше деталей о всех значениях и поддержке браузерами.</p>
+
+<h2 id="Выравнивание_содержимого_по_главной_оси">Выравнивание содержимого по главной оси</h2>
+
+<p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обсуловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p>
+
+<p>В нашем первом примере с использованием свойства <code>display: flex</code>, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p>
+
+<p><img alt="Three items, each 100 pixels wide in a 500 pixel container. The available space is at the end of the items." src="https://mdn.mozillademos.org/files/15632/align6.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>Свойство <code>justify-content</code> может принимать те же самые значения, что и <code>align-content</code>.</p>
+
+<ul>
+ <li><code>justify-content: flex-start</code></li>
+ <li><code>justify-content: flex-end</code></li>
+ <li><code>justify-content: center</code></li>
+ <li><code>justify-content: space-between</code></li>
+ <li><code>justify-content: space-around</code></li>
+ <li><code>justify-content: stretch</code></li>
+ <li><code>justify-content: space-evenly</code> (не определено в спецификации Flexbox)</li>
+</ul>
+
+<p>В примере ниже, свойству <code>justify-content</code> задано значение <code>space-between</code>. Все доступное пространство распределяется между элементами после их позиционирования в контейнере. Первый и последний элементы занимают положения в начале и в конце контейнера соответственно.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content.html", '100%', 480)}}</p>
+
+<p>Если свойство <code>flex-direction</code> имеет значение <code>column</code>, то свойство <code>justify-content</code> распределит доступное пространство в контейнере между элементами.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-column.html", '100%', 880)}} </p>
+
+<h3 id="Выравнивание_и_режим_записи">Выравнивание и режим записи</h3>
+
+<p>Необходимо помнить, что при использовании свойств <code>flex-start</code> и<code>flex-end</code> элементы позиционируются в режиме записи. Если свойству <code>justify-content</code> задано значение <code>start</code> и стоит режим записи left-to-right (слева-направо), как в английском, то элементы выравниваются, начиная с левой стороны контейнера.</p>
+
+<p><img alt="Three items lined up on the left" src="https://mdn.mozillademos.org/files/15638/Basics5.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Однако, если задан режим записи right-to-left (справа-налево), как в арабском языке, то элементы будут выстраиваться с правой стороны контейнера.</p>
+
+<p><img alt="Three items lined up from the right" src="https://mdn.mozillademos.org/files/15639/Basics6.png" style="display: block; height: 152px; margin: 0px auto; width: 634px;"></p>
+
+<p>В примере ниже свойству <code>property</code> задано значение <code>rtl</code>, которое изменяет порядок наших элементов. Вы можете удалить это свойство или изменить значение свойства <code>justify-content</code>, чтобы увидеть, как работает flexbox, когда отображение элементов начинается справа.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-writing-mode.html", '100%', 440)}} </p>
+
+<h2 id="Выравнивание_и_гибкое-направление">Выравнивание и гибкое-направление</h2>
+
+<p>Начальное положение элементов поменяется, если вы измените значение свойства <code>flex-direction</code> — например установите <code>row-reverse</code> вместо <code>row</code>.</p>
+
+<p>В следующем примере заданы следующие свойства: <code>flex-direction: row-reverse</code> и <code>justify-content: flex-end</code>. В языках с параметром записи <code>ltr</code> все элементы будут отображаться с левой стороны. Попробуйте изменить свойство <code>flex-direction: row-reverse</code> на <code>flex-direction: row</code>. Вы увидите, что теперь элементы отображаются реверсивно.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
+
+<p>Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство <code>flex-direction</code>, элементы контейнера выстраиваются в режиме записи вашего языка (<code>ltr</code> или <code>rtl</code>). </p>
+
+<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p>Вы можете сделать отображение элементов контейнера блочным, задав свойству <code>flex-direction</code> значение  <code>column</code>. Свойство <code>flex-start</code> будет отображать элементы в столбец сверху вниз. Таким образом, первый элемент будет первым параграфом.</p>
+
+<p><img alt="Diagram showing start at the top and end at the bottom." src="https://mdn.mozillademos.org/files/15636/align10.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<p>Если вы зададите свойству <code>flex-direction</code> реверсивное значение, то элементы будут позиционироваться в обратном порядке. Так, свойство <code>flex-start</code> будет брать начало в конце контейнера. Первый элемент будет находится в конце строки, если задано строчное отображение элементов или в конце параграфа, если задано блочное отображение.   </p>
+
+<p><img alt="Diagram showing start on the right and end on the left." src="https://mdn.mozillademos.org/files/15635/align9.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
+
+<p><img alt="Diagram showing end at the top and start at the bottom" src="https://mdn.mozillademos.org/files/15637/align11.png" style="display: block; height: 273px; margin: 0px auto; width: 709px;"></p>
+
+<h2 id="Использование_авто_отступов_для_выравнивания_по_главной_оси">Использование авто отступов для выравнивания по главной оси</h2>
+
+<p>Так как элементы, расположенные на главной оси, обрабатываются как группа, свойства <code>justify-items</code> или <code>justify-self</code> становятся недоступными. Тем не менее, существует способ отделить конкретный элемент или группу элементов от остальных, используя внешний отступ <code>margin</code> со значением <code>auto</code>. </p>
+
+<p>Распространённый пример — панель навигации, в которой отдельные важные элементы выровнены по правому краю, а основная группа элементов — по левому.</p>
+
+<p>На первый взгляд может показаться, что это юзкейс для свойства <code>justify-self</code>. Однако, рассмотрим следующий ниже пример. Имеется три элемента с одной стороны и два — с другой. Если бы мы могли использовать <code>justify-self</code> на элементе <em>d</em>, это также изменило бы выравнивание следующего элемента — <em>e</em>, что может противоречить первоначальному замыслу.</p>
+
+<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
+
+<p>Вместо этого мы можем выбрать четвёртый элемент (<em>d</em>) и отделить его от первых трёх, задав ему значение <code>auto</code> для <code>margin-left</code>. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает <code>margin-right</code>. Оба свойства со значениями <code>auto</code> отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.</p>
+
+<p>В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс <code>push</code> с заданным <code>margin-left: auto</code>. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. </p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/auto-margins.html", '100%', 470)}} </p>
+
+<h2 id="Будущие_функции_выравнивания_для_Flexbox">Будущие функции выравнивания для Flexbox</h2>
+
+<p>В начале этой статьи объясняется, что свойства выравнивания, которые в настоящее время содержатся в спецификации Flexbox Level 1, также включены в спецификацию Box Alignment Level 3, которая в дальнейшем может расширить эти свойства и значения. Мы уже видели, как это произошло с введением значения <code>space-evenly</code> для свойств <code>align-content</code> и <code>justify-content</code>.</p>
+
+<p>Выравнивание во Flexbox также включает в себя другие методы создания пространства между элементами, такие как <code>column-gap</code> and <code>row-gap</code>, как показано в макете <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a>. Включение этих свойств в Box Alignment означает, что в будущем мы также сможем использовать <code>column-gap</code> и <code>row-gap</code> во Flexbox разметке. Это означает, что вам не нужно будет использовать отступы, чтобы создать пространство между элементами.</p>
+
+<p>Мое предложение заключается в том, чтобы при изучении выравнивания во Flexbox, делать это параллельно с выравниванием в Grid Layout. В обеих спецификациях используются свойства выравнивания, подобные Flexbox. Вы можете видеть, как эти свойства ведут себя при работе с сеткой в статье <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout">Box Alignment in Grid Layout</a>, а также рассмотреть как выравнивание работает в этих спецификациях в статье <a href="https://rachelandrew.co.uk/css/cheatsheets/box-alignment">Box Alignment Cheatsheet</a>.</p>
+
+<p>Смотрите Также</p>
+
+<ul>
+ <li>Выравнивание Коробки</li>
+ <li>Выравнивание Коробки в Flexbox (Гибкая Коробка)</li>
+ <li>Выравнивание Коробки в Grid Layout (Макет Сетки)</li>
+</ul>
diff --git a/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html b/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html
new file mode 100644
index 0000000000..97e521c2e1
--- /dev/null
+++ b/files/ru/web/css/css_flexible_box_layout/контролирование_соотношения_элементов_вдоль_главной_оси/index.html
@@ -0,0 +1,194 @@
+---
+title: Управление соотношением элементов вдоль главной оси
+slug: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси
+translation_of: >-
+  Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
+---
+<div>{{CSSRef}}</div>
+
+<div></div>
+
+<div>В данном руководстве, мы исследуем три свойства  применяемые к flex элементам, которые позволяют нам контролировать размер и  гибкость flex элементов по основной(main) оси. Полное понимание, как эти свойства работают,  при увеличение и уменьшение элементов, есть ключ к мастерству flexbox.</div>
+
+<h2 id="A_first_look">A first look</h2>
+
+<p>Our three properties control the following aspects of a flex item's flexibility:</p>
+
+<ul>
+ <li><code>flex-grow</code>: How much of the positive free space does this item get?</li>
+ <li><code>flex-shrink</code>: How much negative free space can be removed from this item?</li>
+ <li><code>flex-basis</code>: What is the size of the item before growing and shrinking happens?</li>
+</ul>
+
+<p>The properties are usually expressed as the shorthand {{CSSxRef("flex")}} property. The following code would set the <code>flex-grow</code> property to <code>2</code>, <code>flex-shrink</code> to <code>1</code> and <code>flex-basis</code> to <code>auto</code>.</p>
+
+<pre class="brush: css no-line-numbers">.item {
+  flex: 2 1 auto;
+}</pre>
+
+<p>If you have read the article <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Basic Concepts of Flexbox</a>, then you will have already had an introduction to the properties. Here we will explore them in depth in order that you can fully understand what the browser is doing when you use them.</p>
+
+<h2 id="Important_concepts_when_working_on_the_main_axis">Important concepts when working on the main axis</h2>
+
+<p>There are a few concepts worth digging into before looking at how the flex properties work to control ratios along the main axis. These relate to the <em>natural</em> size of flex items before any growing or shrinking takes place, and to the concept of free space.</p>
+
+<h3 id="Flex_item_sizing">Flex item sizing</h3>
+
+<p>In order to work out how much space there is available to lay out flex items, the browser needs to know how big the item is to start with. How is this worked out for items that don’t have a width or a height applied using an absolute length unit?</p>
+
+<p>There is a concept in CSS of {{CSSxRef('width','min-content','#min-content')}} and {{CSSxRef('width','max-content','#max-content')}} — these keywords are <a href="https://drafts.csswg.org/css-sizing-3/#width-height-keywords">defined in the CSS Intrinsic and Extrinsic Sizing Specification</a>, and can be used in place of a <a href="/en-US/docs/Web/CSS/length">length unit</a>.</p>
+
+<p>In the live example below for instance I have two paragraph elements that contain a string of text. The first paragraph has a width of <code>min-content</code>. In a browser that supports this keyword you should be able to see that the text has taken all of the soft wrapping opportunities available to it, becoming as small as it can be without overflowing. This then, is the <code>min-content</code> size of that string. Essentially, the longest word in the string is dictating the size.</p>
+
+<p>The second paragraph has a value of <code>max-content</code> and so it does the opposite. It gets as big as it possibly can be, taking no soft-wrapping opportunities. It would overflow the box it is in if that container was too narrow.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/min-max-content.html", '100%', 750)}}</p>
+
+<p>If your browser does not yet support these keywords both paragraphs will be rendered as normal paragraphs in block flow; the below screenshots show the expected rendering.</p>
+
+<p><img alt="The first paragraph is wrapped to the longest word, the second stretched out so as to cause overflow." src="https://mdn.mozillademos.org/files/15658/ratios-size.png" style="display: block; height: 558px; margin: 0px auto; width: 1520px;"></p>
+
+<p>Remember this behaviour and what effects <code>min-content</code> and <code>max-content</code> have as we explore <code>flex-grow</code> and <code>flex-shrink</code> later in this article.</p>
+
+<h3 id="Positive_and_negative_free_space">Positive and negative free space</h3>
+
+<p>To talk about these properties we need to understand the concept of <strong>positive and negative free space</strong>. When a flex container has positive free space, it has more space than is required to display the flex items inside the container. For example, if I have a 500 pixel-wide container, {{CSSxRef("flex-direction")}} is <code>row</code>, and I have three flex items each 100 pixels wide, then I have 200 pixels of positive free space, which could be distributed between the items if I wanted them to fill the container.</p>
+
+<p><img alt="Image showing space left over after items have been displayed." src="https://mdn.mozillademos.org/files/15654/Basics7.png" style="display: block; height: 198px; margin: 0px auto; width: 528px;"></p>
+
+<p>We have negative free space when the natural size of the items adds up to larger than the available space in the flex container. If I have a 500 pixel-wide container like the one above, but the three flex items are each 200 pixels wide, the total space I need will be 600 pixels, so I have 100 pixels of negative free space. This could be removed from the items in order to make them fit the container.</p>
+
+<p><img alt="The items overflow the container" src="https://mdn.mozillademos.org/files/15655/ratios1.png" style="display: block; height: 198px; margin: 0px auto; width: 634px;"></p>
+
+<p>It is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties.</p>
+
+<p>In the following examples I am working with {{CSSxRef("flex-direction")}} set to row, therefore the size of items will always come from their width. We will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. You could equally try out each example with <code>flex-direction: column</code>. The main axis would then be the column, and you would then need to compare the height of the items and that of the container they are in to work out the positive and negative free space.</p>
+
+<h2 id="The_flex-basis_property">The flex-basis property</h2>
+
+<p>The {{CSSxRef("flex-basis")}} property specifies the initial size of the flex item before any space distribution happens. The initial value for this property is <code>auto</code>. If <code>flex-basis</code> is set to <code>auto</code> then to work out the initial size of the item the browser first checks if the main size of the item has an absolute size set. This would be the case if you had given your item a width of 200 pixels. In that case <code>200px</code> would be the <code>flex-basis</code> for this item.</p>
+
+<p>If your item is instead auto-sized, then <code>auto</code> resolves to the size of its content. At this point your knowledge of <code>min-</code> and <code>max-content</code> sizing becomes useful, as flexbox will take the <code>max-content</code> size of the item as the <code>flex-basis</code>. The following live example can help to demonstrate this.</p>
+
+<p>In this example I have created a series of inflexible boxes, with both <code>flex-grow</code> and <code>flex-shrink</code> set to <code>0</code>. Here we can see how the first item — which has an explicit width of 150 pixels set as the main size — takes a <code>flex-basis</code> of <code>150px</code>, whereas the other two items have no width and so are sized according to their content width.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-basis.html", '100%', 500)}}</p>
+
+<p>In addition to the <code>auto</code> keyword, you can use the <code>content</code> keyword as the <code>flex-basis</code>. This will result in the <code>flex-basis</code> being taken from the content size even if there is a width set on the item. This is a newer keyword and has less browser support, however you can always get the same effect by using <code>auto</code> as the flex-basis and ensuring that your item does not have a width set, in order that it will be auto-sized.</p>
+
+<p>If you want flexbox to completely ignore the size of the item when doing space distribution then set <code>flex-basis</code> to <code>0</code>. This essentially tells flexbox that all the space is up for grabs, and to share it out in proportion. We will see examples of this as we move on to look at <code>flex-grow</code>.</p>
+
+<h2 id="The_flex-grow_property">The flex-grow property</h2>
+
+<p>The {{CSSxRef("flex-grow")}} property specifies the <strong>flex grow factor</strong>, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when the positive free space is distributed.</p>
+
+<p>If all of your items have the same <code>flex-grow</code> factor then space will be distributed evenly between all of them. If this is the situation that you want then typically you would use <code>1</code> as the value, however you could give them all a <code>flex-grow</code> of <code>88</code>, or <code>100</code>, or <code>1.2</code> if you like — it is a ratio. If the factor is the same for all, and there is positive free space in the flex container then it will be distributed equally to all.</p>
+
+<h3 id="Combining_flex-grow_and_flex-basis">Combining <code>flex-grow</code> and <code>flex-basis</code></h3>
+
+<p>Things can get confusing in terms of how <code>flex-grow</code> and <code>flex-basis</code> interact. Let's consider the case of three flex items of differing content lengths and the following <code>flex</code> rules applied to them:</p>
+
+<p><code>flex: 1 1 auto;</code></p>
+
+<p>In this case the <code>flex-basis</code> value is <code>auto</code> and the items don’t have a width set, and so are auto-sized. This means that flexbox is looking at the <code>max-content</code> size of the items. After laying the items out we have some positive free space in the flex container, shown in this image as the hatched area:</p>
+
+<p><img alt="Images shows the positive free space as a hatched area" src="https://mdn.mozillademos.org/files/15656/ratios2.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>We are working with a <code>flex-basis</code> equal to the content size so the available space to distribute is subtracted from the total available space (the width of the flex container), and the leftover space is then shared out equally among each item. Our bigger item ends up bigger because it started from a bigger size, even though it has the same amount of spare space assigned to it as the others:</p>
+
+<p><img alt="The positive space is distributed between items" src="https://mdn.mozillademos.org/files/15657/ratios3.png" style="display: block; height: 100px; margin: 0px auto; width: 634px;"></p>
+
+<p>If what you actually want is three equally-sized items, even if they start out at different sizes, you should use this:</p>
+
+<p><code>flex: 1 1 0;</code></p>
+
+<p>Here we are saying that the size of the item for the purposes of our space distribution calculation is <code>0</code> — all the space is up for grabs and as all of the items have the same <code>flex-grow</code> factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.</p>
+
+<p>Try changing the <code>flex-grow</code> factor from 1 to 0 in this live example to see the different behavior:</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow.html", '100%', 520)}}</p>
+
+<h3 id="Giving_items_different_flex-grow_factors">Giving items different flex-grow factors</h3>
+
+<p>Our understanding of how <code>flex-grow</code> works with <code>flex-basis</code> allows us to have further control over our individual item sizes by assigning items different <code>flex-grow</code> factors. If we keep our <code>flex-basis</code> at <code>0</code> so all of the space can be distributed, we could assign each of the three flex items a different <code>flex-grow</code> factor. In the example below I am using the following values:</p>
+
+<ul>
+ <li><code>1</code> for the first item.</li>
+ <li><code>1</code> for the second item.</li>
+ <li><code>2</code> for the third item.</li>
+</ul>
+
+<p>Working from a <code>flex-basis</code> of <code>0</code> this means that the available space is distributed as follows. We need to add up the flex grow factors, then divide the total amount of positive free space in the flex container by that number, which in this case is 4. We then share out the space according to the individual values — the first item gets one part, the second one part, the third two parts. This means that the third item is twice the size of the first and second items.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-grow-ratios.html", '100%', 520)}}</p>
+
+<p>Remember that you can use any positive value here. It is the ratio between one item and the others that matters. You can use large numbers, or decimals — it is up to you. To test that out change the values assigned in the above example to <code>.25</code>, <code>.25</code>, and <code>.50</code> — you should see the same result.</p>
+
+<h2 id="The_flex-shrink_property">The <code>flex-shrink</code> property</h2>
+
+<p>The {{CSSxRef("flex-shrink")}} property specifies the <strong>flex shrink factor</strong>, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed.</p>
+
+<p>This property deals with situations where the browser calculates the <code>flex-basis</code> values of the flex items, and finds that they are too large to fit into the flex container. As long as <code>flex-shrink</code> has a positive value the items will shrink in order that they do not overflow the container.</p>
+
+<p>So where <code>flex-grow</code> deals with adding available space, <code>flex-shrink</code> manages taking away space to make boxes fit into their container without overflowing.</p>
+
+<p>In the next live example I have three items in a flex container; I’ve given each a width of 200 pixels, and the container is 500 pixels wide. With <code>flex-shrink</code> set to <code>0</code> the items are not allowed to shrink and so they overflow the box.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink.html", '100%', 500)}}</p>
+
+<p>Change the <code>flex-shrink</code> value to <code>1</code> and you will see each item shrink by the same amount, in order that all of the items now fit in the box. They have become smaller than their initial width in order to do so.</p>
+
+<h3 id="Combining_flex-shrink_and_flex-basis">Combining <code>flex-shrink</code> and <code>flex-basis</code></h3>
+
+<p>You could say that <code>flex-shrink</code> works in pretty much the same way as <code>flex-grow</code>. However there are two reasons why it isn’t <em>quite</em> the same.</p>
+
+<p>While it is usually subtle, defined in the specification is one reason why <code>flex-shrink</code> isn’t quite the same for negative space as <code>flex-grow</code> is for positive space:</p>
+
+<blockquote>
+<p>“Note: The flex shrink factor is multiplied by the flex base size when distributing negative space. This distributes negative space in proportion to how much the item is able to shrink, so that e.g. a small item won’t shrink to zero before a larger item has been noticeably reduced.”</p>
+</blockquote>
+
+<p>The second reason is that flexbox prevents small items from shrinking to zero size during this removal of negative free space. The items will be floored at their <code>min-content</code> size — the size that they become if they take advantage of any soft wrapping opportunities available to them.</p>
+
+<p>You can see this <code>min-content</code> flooring happen in the below example, where the <code>flex-basis</code> is resolving to the size of the content. If you change the width on the flex container — increasing it to 700px for example — and then reduce the flex item width, you can see that the first two items will wrap, however they will never become smaller than that <code>min-content</code> size. As the box gets smaller space is then just removed from the third item.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-min-content.html", '100%', 500)}}</p>
+
+<p>In practice the shrinking behaviour does tend to give you reasonable results. You don’t usually want your content to disappear completely or for boxes to get smaller than their minimum content, so the above rules make sense in terms of sensible behaviour for content that needs to be shrunk in order to fit into a container.</p>
+
+<h3 id="Giving_items_different_flex-shrink_factors">Giving items different <code>flex-shrink</code> factors</h3>
+
+<p>In the same way as <code>flex-grow</code>, you can give flex-items different <code>flex-shrink</code> factors. This can help change the default behaviour if, for example, you want an item to shrink more or less rapidly than its siblings or not shrink at all.</p>
+
+<p>In the following live example the first item has a <code>flex-shrink</code> factor of 1, the second <code>0</code> (so it won’t shrink at all), and the third <code>4</code>. The third item therefore shrinks more rapidly than the first. Play around with the different values — as for <code>flex-grow</code> you can use decimals or larger numbers here. Choose whatever makes most sense to you.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/ratios/flex-shrink-ratios.html", '100%', 570)}}</p>
+
+<h2 id="Mastering_sizing_of_flex_items">Mastering sizing of flex items</h2>
+
+<p>The key to really understanding how flex item sizing works is in understanding the number of things that come into play. Consider the following aspects, which we have already discussed in these guides:</p>
+
+<h3 id="What_sets_the_base_size_of_the_item">What sets the base size of the item?</h3>
+
+<ol>
+ <li>Is <code>flex-basis</code> set to <code>auto</code>, and does the item have a width set? If so, the size will be based on that width.</li>
+ <li>Is <code>flex-basis</code> set to <code>auto</code> or <code>content</code> (in a supporting browser)? If so, the size is based on the item size.</li>
+ <li>Is <code>flex-basis</code> a length unit, but not zero? If so this is the size of the item.</li>
+ <li>Is <code>flex-basis</code> set to <code>0</code>? if so then the item size is not taken into consideration for the space-sharing calculation.</li>
+</ol>
+
+<h3 id="Do_we_have_available_space">Do we have available space?</h3>
+
+<p>Items can’t grow with no positive free space, and they won’t shrink unless there is negative free space.</p>
+
+<ol>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>less</strong> than the total width (or height) of the container? If so, then you have positive free space and <code>flex-grow</code> comes into play.</li>
+ <li>If we took all of the items and added up their widths (or heights if working in a column), is that total <strong>more</strong> than the total width (or height) of the container? If so, you have negative free space and <code>flex-shrink</code> comes into play.</li>
+</ol>
+
+<h3 id="Other_ways_to_distribute_space">Other ways to distribute space</h3>
+
+<p>If you do not want space added to the items, remember that you can deal with free space between or around items using the alignment properties described in the guide to aligning items in a flex container. The {{CSSxRef("justify-content")}} property will enable the distribution of free space between or around items. You can also use auto margins on flex items to absorb space and create gaps between items.</p>
+
+<p>With all the flex tools at your disposal you will find that most tasks can be achieved, although it might take a little bit of experimentation at first.</p>