---
title: Elastyczny model pudełkowy CSS
slug: Web/CSS/CSS_Flexible_Box_Layout
translation_of: Web/CSS/CSS_Flexible_Box_Layout
---
<div>{{CSSRef}}</div>

<p class="summary"><strong>Elastyczny model pudełkowy CSS </strong>jest modułem <a href="/en-US/docs/Web/CSS">CSS</a> definiującym model pudełkowy CSS zoptymalizowany do projektowania interfejsów użytkownika i układania elementów wzdłuż osi. W elastycznym modelu pudełkowym dzieci elastycznego kontenera mogą być ułożone w dowolnym kierunku oraz zmieniać swoje rozmiary albo rosnąc w celu zajęcia nieużytej przestrzeni albo kurcząc się by uniknąć przepełnienia kontenera. Zarówno horyzontalne jak i wertykalne ułożenie dzieci może być łatwo kontrolowane.</p>

<h2 id="Prosty_przykład">Prosty przykład</h2>

<p>W poniższym przykładzie kontenerowi ustawiono <code>display: flex</code> co oznacza, że trójka dzieci stała się elastycznymi elementami. Wartość <code>justify-content</code> została ustawiona na <code>space-between</code> w celu równego rozproszenia elementów wzdłuż głównej osi. Między elementami umieszczona zostanie jednakowa ilość przestrzeni, a prawy i lewy element zostaną wypchnięte do krawędzi kontenera. Ponadto elementy są rozciągnięte na całą długość osi prostopadłej z powodu domyślnej wartości <code>align-items</code> wynoszącej <code>stretch</code>. Elementy rozciągają się do maksymanlej wysokości elastycznego kontenera sprawiając, że każdy z nich ma wysokość najwyższego.</p>

<p>{{EmbedGHLiveSample("css-examples/flexbox/basics/simple-example.html", '100%', 500)}}</p>

<h2 id="Odnośniki">Odnośniki</h2>

<h3 id="Atrybuty_CSS">Atrybuty CSS</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>

<h3 id="Słownik_pojęć">Słownik pojęć</h3>

<div class="index">
<ul>
 <li><a href="/en-US/docs/Glossary/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Glossary/Flex_Container">Elastyczny kontener</a></li>
 <li><a href="/en-US/docs/Glossary/Flex_Item">Element flex</a></li>
 <li><a href="/en-US/docs/Glossary/Main_Axis">Oś główna</a></li>
 <li><a href="/en-US/docs/Glossary/Cross_Axis">Oś poprzeczna</a></li>
 <li><a href="/en-US/docs/Glossary/Flex">Flex</a></li>
</ul>
</div>

<h2 id="Przewodniki">Przewodniki</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Podstawowe zagadnienia Flexboksa</a></dt>
 <dd>Przegląd funkcji flexboksa</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Relationship_of_Flexbox_to_Other_Layout_Methods">Powiązania flexboksa z innymi sposobami układu</a></dt>
 <dd>Jak flexbox jest powiązany z innymi rodzajami układu i innymi specyfikacjami CSS</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container">Rozmieszczanie elementów w elastycznym kontenerze</a></dt>
 <dd>Jak atrybuty ustawiania elementów dziłają z flexboksem.</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items">Kolejność elementów elastycznego kontenera</a></dt>
 <dd>Wyjaśnienie różnych sposobów na zmienianie kolejności i kierunku elementów oraz omówienie potencjalnych problemów z tym związanych.</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax">Kontrola proporcji elastycznych elementów wzdłuż osi głównej</a></dt>
 <dd>Artykuł wyjaśniający atrybuty flex-grow, flex-shrink oraz flex-basis.</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items">Przechodzenie elastycznych elementów do nowego wiersza</a></dt>
 <dd>Tworzenie wielolinijkowych kontenerów flex oraz kontrola wyświetlania elementów w tych linijkach.</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Typowe zastosowania flexboksa</a></dt>
 <dd>Częste wzorce projektowe będące typowymi zastosowaniami flexboksa.</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Kompatybilność wsteczna flexboksa</a></dt>
 <dd>Stan flexboksa w przeglądarkach, problemy "interoperability", wsparcie starszych przeglądarek i wersji specyfikacji.</dd>
</dl>

<ul>
</ul>

<h2 id="Specyfikacje">Specyfikacje</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="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</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>

<h2 id="Zobacz_również">Zobacz również</h2>

<dl>
 <dt><a href="https://github.com/philipwalton/flexbugs">Flexbugs</a></dt>
 <dd>tworzona przez społeczność lista błędów flexboksa w przeglądarkach i sposoby ich obejścia</dd>
 <dt><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Mixins">Cross-browser Flexbox mixins</a></dt>
 <dd>Artykuł zawierający zbiór mixinów dla tych którzy chcą stworzyć wieloprzeglądarkowe rozwiązania typu flexbox działające nawet w starszych przeglądarkach nie wspierających nowoczesnej składni flexbox.</dd>
</dl>

<p> </p>