---
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>