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