aboutsummaryrefslogtreecommitdiff
path: root/files/uk/web/css/css_flexible_box_layout
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:43:23 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:43:23 -0500
commit218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch)
treea9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/css/css_flexible_box_layout
parent074785cea106179cb3305637055ab0a009ca74f2 (diff)
downloadtranslated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2
translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip
initial commit
Diffstat (limited to 'files/uk/web/css/css_flexible_box_layout')
-rw-r--r--files/uk/web/css/css_flexible_box_layout/index.html132
-rw-r--r--files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html390
2 files changed, 522 insertions, 0 deletions
diff --git a/files/uk/web/css/css_flexible_box_layout/index.html b/files/uk/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..3520d3040d
--- /dev/null
+++ b/files/uk/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,132 @@
+---
+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 Layout</strong> це модуль CSS що реалізує можливість розмітки макета за допомогою оптимізованої коробочної моделі, що використовується для створення дизайну інтерфейса користувача, та проводити вирівнювання елементів в одному із вимірів. В цій моделі (flex layout), потомки flex контейнера можуть бути розміщені відносно будь якої осі, і можуть "гнучко" змінювати свій розмір, можуть рости, щоб зайняти весь відведений простір або зменшуватись щоб не переповнити своїми поточними розмірами контейнер, що їх містить. Наявне і горизонтальне і вертикальне вирівнювання потомків, і до того-ж проводити будь-які маніпуляції дуже легко.</p>
+
+<p> </p>
+
+<p class="summary"> </p>
+
+<h2 id="Простий_Приклад">Простий Приклад</h2>
+
+<p>В наступному прикладі у контейнерa встановлено властивість <code>display: flex</code>, що означає - три його вкладені елементи є  flex елементами. Значення <code>justify-content</code> має значення <code>space-between</code> для того щоб порожній простір між елементами рівномірно розподілився по головній осі. Однаковий простір буде виділений між кожним елементом, але при цьому крайні елементи(перший та останній) не будуть мати  справа та зліва відповідно відступів від контейнера. Ви можете бачити що елементи будуть розподілені по поточній направляючій вісі, бо на це впливають виставлені по замовчуванню значення властивості <code>align-items</code> рівний <code>stretch</code>. Елементи розтягуються по висоті flex контейнера, і кожен стане такої висоти як самий вищий елемент.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>
+
+<h2 id="Reference">Reference</h2>
+
+<p class="summary"> </p>
+
+<h2 id="Reference_2">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="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <thead>
+ <tr>
+ <th scope="col">Specification</th>
+ <th scope="col">Status</th>
+ <th scope="col">Comment</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>
+
+<p> </p>
diff --git a/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
new file mode 100644
index 0000000000..cdb8ea92c1
--- /dev/null
+++ b/files/uk/web/css/css_flexible_box_layout/using_css_flexible_boxes/index.html
@@ -0,0 +1,390 @@
+---
+title: Використання CSS flexible-боксів
+slug: Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
+translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
+---
+<div>{{CSSRef}}</div>
+
+<p><span class="seoSummary">CSS3 <strong>flex-бокс</strong>, або <strong>flexbox</strong>, це <a href="/en-US/docs/Web/CSS/Layout_mode">режим розмітки</a> створений для упорядкування елементів на сторінці таким чином, щоб вони поводилися передбачувано у випадках, коли розмітка сторінки адаптована під різні розміри екрану і різні девайси.</span>  В багатьох випадках flexible box є вдосконаленням блокової моделі розмітки, яка не використовує обтікання (floats) і не виконує схлопування відступів flex контейнера і  його контенту (margins collapse).</p>
+
+<p>Для багатьох дизайнерів модель використання flex-боксів буде більш простою для застосування. Дочірні елементи всередині flex-боксу можуть розміщуватись у будь-якому напрямку і можуть мати змінні виміри щоб адаптовуватись до різних розмірів дисплею. Позиціонування елементів у такому разі є простішим і комплексна розмітка досягається значно легше і з чистішим кодом, оскільки порядок відображення елементів не пов'язаний із їх порядком в коді. Ця незалежність навмисне стосується лише візуального рендерингу, залишаючи порядок інтерпритації і навігацію залежними від порядку у сорсі.</p>
+
+<div class="note"><strong>Увага:</strong> Де-які броузери все ще можуть частково або повністю не підтримувати flex боксів. Ознайомтесь із  <a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes#Browser_compatibility">таблицею сумісності</a> для flex боксів</div>
+
+<h2 id="Концепція_flex-боксів">Концепція flex-боксів</h2>
+
+<p>Головною концепцією flex-боксів є можливість зміни висоти та/або ширини його елементів шоб найкраше заповнювати простір будь-якого дисплею. Flex-контейнер збільшує елементи, щоб заповнити доступний простір чи зменшує щоб запобігти перекриванню.</p>
+
+<p>Алгоритм розмітки flex-боксами є напрямно-агностичним на противагу блоковій розмітці, яка вертикально-орієнтована, чи горизонтально-орієнтованій інлайн-розмітці. Не зважаючи на те що розмітка блоками добре підходить для сторінки, їй не вистачає об'єктивного механізму для підтримки компонентів, що повинні змінювати орієнтацію, розміри а також розтягуватись чи стискатись при змінах юзер-агента, змінах з вертикальної на горизонтальну орієнтацію і таке інше. Розмітка flex-боксами найбільш бажана для компонентів додатку і шаблонів, що мало масштабуються, тоді як grid-розмітка створена для великих шаблонів, що масштабуються. Обидві технології є частиною розробки CSS Working Group яка має сприяти сумісності web-аплікацій з різними юзер-агентами, режимами а також більшій гнучкості.</p>
+
+<h2 id="Словник_Flexible_box_термінів">Словник Flexible box термінів  </h2>
+
+<p>Оскільки опис flexible-боксів не включає таких словосполучень, як горизонтальна/інлайн і вертикальна/блокова осі, пояснення моделі передбачає нову термінологію. Використовуйте наступну діаграму під час перегляду словника термінів. Вона зображає 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-контейнер визначається <code>flex</code> або <code>inline-flex</code> значеннями {{Cssxref("display")}} властивості.</dd>
+ <dt>Flex-айтем</dt>
+ <dd>
+ <p>Кожен дочірній елемент flex-контейнеру стає flex-айтемом. Текст, що напряму міститься в flex-контейнері обгортається анонімним flex-айтемом.</p>
+ </dd>
+ <dt>Осі</dt>
+ <dd>
+ <p>Кожен flexible-бокс шаблон будується по двох осях. Головна вісь (<strong>main axis)</strong> - вісь, вздовж якої flex-айтеми слідують один за одним. Перехресна вісь (<strong>cross axis)</strong> вісь, що перпендикулярна до <strong>main axis</strong>.</p>
+
+ <ul>
+ <li>Властивість <code><a href="/en-US/docs/Web/CSS/flex-direction">flex-direction</a></code> встановлює main axis.</li>
+ <li>Властивість <a href="/en-US/docs/Web/CSS/justify-content"><code>justify-content</code></a> визначає як flex-айтеми розташовані вздовж main axis на поточній лінії.</li>
+ <li>Властивість <a href="/en-US/docs/Web/CSS/align-items"><code>align-items</code></a> визначає замовчування для розташування flex-айтемів вздовж cross axis на поточній лінії.</li>
+ <li>Властивість <a href="/en-US/docs/Web/CSS/align-self"><code>align-self</code></a> встановлює, як кожен окремий flex-айтем вирівняний по cross axis і переписує замовчування, встановлене за допомогою <code>align-items.</code></li>
+ </ul>
+ </dd>
+ <dt>Напрямки</dt>
+ <dd>
+ <p>Головний початок/головний кінець(<strong>main start</strong>/<strong>main end) </strong>і перехресний початок/перехресний кінець(<strong>cross start</strong>/<strong>cross end)</strong> це сторони flex-контейнера, що визначають початок і закінчення потоку flex-айтемів. Вони слідують за головною і перехресною осями flex-контейнера у векторі, встановленому режимом написання (зліва-направо, зправа-наліво і т.д.).</p>
+
+ <ul>
+ <li>Властивість <a href="/en-US/docs/Web/CSS/order"><code>order</code></a> присвоює елементи порядковим групам і визначає, який елемент є першим.</li>
+ <li>Властивість <a href="/en-US/docs/Web/CSS/flex-flow"><code>flex-flow</code></a> це скорочена форма для <a href="/en-US/docs/Web/CSS/flex-direction"><code>flex-direction</code></a> та <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивостей.</li>
+ </ul>
+ </dd>
+ <dt>Лінії</dt>
+ <dd>
+ <p>Flex-айтеми можуть бути розміщені на одній чи кількох лініях відповідно до <a href="/en-US/docs/Web/CSS/flex-wrap"><code>flex-wrap</code></a> властивості, яка контролює напрямок перехресних ліній і напрямок у якому складаються нові лінії.</p>
+ </dd>
+ <dt>Виміри</dt>
+ <dd>Еквівалентами для height і width для flex-айтемів є <strong>main size</strong> та <strong>cross size,</strong> які відповідно стосуються main axis і cross axis flex-контейнера.</dd>
+ <dd>
+ <ul>
+ <li>Початковим значенням для <code><a href="/en-US/docs/Web/CSS/min-height">min-height</a></code> і <code><a href="/en-US/docs/Web/CSS/min-width">min-width</a></code> є 0.</li>
+ <li>Властивість <a href="/en-US/docs/Web/CSS/flex"><code>flex</code></a> виступає скороченням для <a href="/en-US/docs/Web/CSS/flex-grow"><code>flex-grow</code></a>, <a href="/en-US/docs/Web/CSS/flex-shrink"><code>flex-shrink</code></a>, а також <code><a href="/en-US/docs/Web/CSS/flex-basis">flex-basis</a> </code>властивостей для встановлення гнучкості flex-айтема.</li>
+ </ul>
+ </dd>
+</dl>
+
+<h2 id="Робимо_елемент_flexible-боксом">Робимо елемент flexible-боксом</h2>
+
+<p>Щоб зробити елемент flexible-боксом, вкажіт занчення <a href="/en-US/docs/Web/CSS/display">display</a> властивості наступним чином:</p>
+
+<pre class="brush: css">display : flex</pre>
+
+<p>або</p>
+
+<pre class="brush: css">display : inline-flex</pre>
+
+<p>Роблячи таким чином, ми визначаєм елемент як flexible-бокс, а його нащадків- як flexible-айтеми. Значення <code>flex</code> робить контейнер блоковим елементом. А <code>inline-flex</code> значення перетворює його на інлайн-елемент.</p>
+
+<div class="note"><strong>Увага:</strong> Для вказання префіксу вендора, додайте рядок до значення атрибуту, а не до самого атрибуту. Наприклад, <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>У сусідніх flex-айтемів марджіни не накладаються один на інший. Використовуючи auto марджіни можна поглинути зайві відстані у вертикальному чи горизонтальному напрямках тим самим досягнувши вирівнювання чи розмежування сусідніх flex-айтемів.  Для детальної інформації прочитайте  <a href="http://dev.w3.org/csswg/css3-flexbox/#auto-margins">вирівнювання з допомогою 'auto' марджінів</a> у W3C специфікації "модель Flexible-бокс розмітки" (англ.).</p>
+
+<p><s>Для забезпечення адекватного замовчування мінімальних розмірів flex-айтема, використовуйте <code>min-width:auto</code> і/або <code>min-height:auto</code>. Для flex-айтемів, значення атрибуту <code>auto</code> вираховує мінімальну ширину/висоту айтема щоб не були меншими за ширину/висоту їхнього контенту, гарантуючи, що айтем відрендерений достатньо великим, для того, щоб вмістити контент. Дивіться {{cssxref("min-width")}} і {{cssxref("min-height")}} для більш детальної інформації.</s></p>
+
+<p>Атрибути вирівнювання flex-боксів виконують справжнє центрування, на відміну від інших методів центрування у CSS. Це означає, що flex-айтеми залишаться відцентрованими навіть коли вони виходять за межі flex-контейнера. Хоча така ситуація де-коли можи бути проблемою, оскільки якщо вони виходять за межі верхнього чи лівого (для LTR мов , таких, як англійська чи українська; проблема актуальна для правого краю для RTL мов, таких, як арабська) країв сторінки, вам не вдасться проскролити до цієї частини, не зважаючи на те, що там є контент! В майбутньому релізі властивості вирівнювання мають бути розширені для підтримаки безпечного режиму також. Зараз, якщо це проблема, Ви можете використовувати відступи (margin), щоб досягнути центрування.</p>
+
+<p>For now, if this is a concern, you can instead use margins to achieve centering, as they'll respond in a "safe" way and stop centering if they overflow. Instead of using the <code>align-</code> properties, just put auto margins on the flex items you wish to center. Instead of the <code>justify-</code> properties, put auto margins on the outside edges of the first and last flex items in the flex container. The auto margins will "flex" and assume the leftover space, centering the flex items when there is leftover space, and switching to normal alignment when not. However, if you're trying to replace <code>justify-content</code> with margin-based centering in a multi-line flexbox, you're probably out of luck, as you need to put the margins on the first and last flex item on each line. Unless you can predict ahead of time which items will end up on which line, you can't reliably use margin-based centering in the main axis to replace the <code>justify-content</code> property.</p>
+
+<p>Recall that while the display order of the elements is independent of their order in the source code, this independence affects only the visual rendering, leaving speech order and navigation based on the source order. Even the {{cssxref("order")}} property does not affect speech or navigation sequence. Thus developers must take care to order elements properly in the source so as not to damage the document's accessibility.</p>
+
+<h2 id="Flexible_box_properties">Flexible box properties</h2>
+
+<h3 id="Properties_not_affecting_flexible_boxes">Properties not affecting flexible boxes</h3>
+
+<p>Because flexible boxes use a different layout algorithm, some properties do not make sense on a flex container:</p>
+
+<ul>
+ <li><code>column-*</code> properties of the <a href="/en-US/docs/Web/CSS/Using_CSS_multi-column_layouts">multiple column module</a> have no effect on a flex item.</li>
+ <li>{{cssxref("float")}} and {{cssxref("clear")}} have no effect on a flex item. Using <code>float</code> causes the <code>display</code> property of the element to compute to <code>block</code>.</li>
+ <li>{{cssxref("vertical-align")}} has no effect on the alignment of flex items.</li>
+</ul>
+
+<h2 id="Examples">Examples</h2>
+
+<h3 id="Basic_flex_example">Basic flex example</h3>
+
+<p>This basic example shows how to apply "flexibility" to an element and how sibling elements behave in a flexible state.</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: -webkit-flex;
+ -webkit-flex-direction: row;
+
+ display: flex;
+ flex-direction: row;
+ }
+
+ .flex &gt; div
+ {
+ -webkit-flex: 1 1 auto;
+ 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.) */
+
+ -webkit-transition: width 0.7s ease-out;
+ 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="Holy_Grail_Layout_example">Holy Grail Layout example</h3>
+
+<p>This example demonstrates how flexbox provides the ability to dynamically change the layout for different screen resolutions. The following diagram illustrates the transformation.</p>
+
+<p><img alt="HolyGrailLayout.png" class="default internal" src="/files/3760/HolyGrailLayout.png"></p>
+
+<p>Illustrated here is the case where the page layout suited to a browser window must be optimized for a smart phone window. Not only must the elements reduce in size, but the order in which they are presented must change. Flexbox makes this very simple.</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: -webkit-flex;
+ display: flex;
+ -webkit-flex-flow: row;
+ flex-flow: row;
+ }
+
+ #main &gt; article {
+ margin: 4px;
+ padding: 5px;
+ border: 1px solid #cccc33;
+ border-radius: 7pt;
+ background: #dddd88;
+ -webkit-flex: 3 1 60%;
+ flex: 3 1 60%;
+ -webkit-order: 2;
+ order: 2;
+ }
+
+ #main &gt; nav {
+ margin: 4px;
+ padding: 5px;
+ border: 1px solid #8888bb;
+ border-radius: 7pt;
+ background: #ccccff;
+ -webkit-flex: 1 6 20%;
+ flex: 1 6 20%;
+ -webkit-order: 1;
+ order: 1;
+ }
+
+ #main &gt; aside {
+ margin: 4px;
+ padding: 5px;
+ border: 1px solid #8888bb;
+ border-radius: 7pt;
+ background: #ccccff;
+ -webkit-flex: 1 6 20%;
+ flex: 1 6 20%;
+ -webkit-order: 3;
+ 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 {
+ -webkit-flex-flow: column;
+ flex-direction: column;
+ }
+
+ #main &gt; article, #main &gt; nav, #main &gt; aside {
+ /* Return them to document order */
+ -webkit-order: 0;
+ 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="Playground">Playground</h2>
+
+<p>There are a few flexbox playgrounds available online for experimenting:</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>
+</ul>
+
+<h2 id="Things_to_keep_in_mind">Things to keep in mind</h2>
+
+<p>The algorithm describing how flex items are laid out can be pretty tricky at times. Here are a few things to consider to avoid bad surprises when designing using flexible boxes.</p>
+
+<p>Flexible boxes are laid out in conformance of the <a href="https://developer.mozilla.org/en-US/docs/CSS/writing-mode">writing mode</a>, which means that <strong>main start</strong> and <strong>main end</strong> are laid out according to the position of <strong>start</strong> and <strong>end</strong>.</p>
+
+<p><strong>cross start</strong> and <strong>cross end</strong> rely on the definition of the <strong>start</strong> or <strong>before</strong> position that depends on the value of <a href="/en-US/docs/Web/CSS/direction"><code>direction</code></a>.</p>
+
+<p>Page breaks are possible in flexible boxes layout as long as <code>break-</code> property allows it. CSS3 <code>break-after</code>, <code>break-before</code>, and <code>break-inside</code> as well as CSS 2.1 <code>page-break-before</code>, <code>page-break-after</code>, and <code>page-break-inside</code> properties are accepted on a flex container, flex items, and inside flex items.</p>
+
+<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 (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 up to version  6.0 (iOS.1) supported an old incompatible draft version of the specification. Safari 6.1 (and Safari on iOS 7) has been updated to support the final version.</p>
+
+<p>[2] Up to Firefox 22, to activate flexbox support, the user has to change the <code>about:config</code> preference <code>layout.css.flexbox.enabled</code> to <code>true</code>. From Firefox 22 to Firefox 27, the preference is <code>true</code> by default, but the preference has been removed in Firefox 28.</p>
+
+<p>[3] Internet Explorer 10 supports an old incompatible draft version of the specification; Internet Explorer 11 <a href="http://msdn.microsoft.com/en-us/library/ie/dn265027%28v=vs.85%29.aspx">has been updated</a> to support the final version.</p>
+
+<p>[4] Android browser up to 4.3 supported an old incompatible draft version of the specification. Android 4.4 has been updated to support the final version.</p>
+
+<p>[5] While in the initial implementation in Opera 12.10 <code>flexbox</code> was not prefixed, it got prefixed in versions 15 to 16 of Opera and 15 to 19 of Opera Mobile with {{property_prefix("-webkit")}}. The prefix was removed again in Opera 17 and Opera Mobile 24.</p>
+
+<p>[6] Up to Firefox 29, specifying <code>visibility: collapse</code> on a flex item causes it to be treated as if it were <code>display: none</code> instead of the intended behavior, treating it as if it were <code>visibility: hidden</code>. The suggested workaround is to use <code>visibility:hidden</code> for flex items that should behave as if they were designated <code>visibility:collapse</code>. For more information, see {{bug(783470)}}</p>