initial commit

1 files changed, 156 insertions, 0 deletions

diff --git a/files/pl/web/css/css_flexible_box_layout/index.html b/files/pl/web/css/css_flexible_box_layout/index.html
new file mode 100644
index 0000000000..ae8c92e4d8
--- /dev/null
+++ b/files/pl/web/css/css_flexible_box_layout/index.html
@@ -0,0 +1,156 @@
+---
+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>