blob: ae8c92e4d87d243ec00e24e1ebfc304b239bfce7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
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>
|
