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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
|
---
title: flex
slug: Web/CSS/flex
tags:
- CSS
- CSS Flexible Boxes
- CSS Властивість
- flexbox
translation_of: Web/CSS/flex
---
<div>{{CSSRef}}</div>
<h2 id="Загальний_огляд">Загальний огляд</h2>
<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> параметр <strong>flex </strong>є <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties">скороченим записом</a> властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.</p>
<p>{{cssinfo}}</p>
<p>Перегляньте <a href="/en-US/docs/CSS/Using_CSS_flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS контейнерів</a> для більш детальної інформації та опису властивостей.</p>
<h2 id="Syntax" name="Syntax">Синтаксис</h2>
<pre class="brush:css">/* 0 0 auto */
flex: none;
/* Одне значення, ціле число: flex-grow (flex-basis змінюється на 0) */
flex: 2;
/* Одне значення, width/height: flex-basis */
flex: 10em;
flex: 30px;
flex: auto;
flex: content;
/* Два значення: flex-grow | flex-basis */
flex: 1 30px;
/* Два значення: flex-grow | flex-shrink (flex-basis змінюється на 0) */
flex: 2 2;
/* Три значення: flex-grow | flex-shrink | flex-basis */
flex: 2 2 10%;
/* Глобальні значення */
flex: inherit;
flex: initial;
flex: unset;
</pre>
<h3 id="Values" name="Values">Значення</h3>
<dl>
<dt><code><'flex-grow'></code></dt>
<dd>Визначає <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">ширину</a> </code>flex елемента відносно ширин всіх сусідніх елементів. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd>
<dt><code><'flex-shrink'></code></dt>
<dd>Визначає <code><a href="/en-US/docs/Web/CSS/flex-shrink">flex-shrink</a></code> flex елемента. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.</dd>
<dt><code><'flex-basis'></code></dt>
<dd>Визначає <code><a href="/en-US/docs/CSS/flex-basis" title="CSS/flex-basis">базис</a> </code>flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри <code>width і</code> <code>height</code>. Значення <code>0</code> має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення <code>0%,</code> коли воно не вказується явно.</dd>
<dt><code>none</code></dt>
<dd>Ключове слово, котре по значенню рівне <code>0 0 auto</code>.</dd>
<dt>
<h3 id="Формальний_синтаксис">Формальний синтаксис</h3>
</dt>
</dl>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Приклад">Приклад</h2>
<pre class="brush: css">#flex-container {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
#flex-container > .flex-item {
-webkit-flex: auto;
flex: auto;
}
#flex-container > .raw-item {
width: 5rem;
}
</pre>
<pre class="brush: html"><div id="flex-container">
<div class="flex-item" id="flex">Flex box (click to toggle raw box)</div>
<div class="raw-item" id="raw">Raw box</div>
</div>
</pre>
<div class="hidden">
<pre class="brush: js">var flex = document.getElementById("flex");
var raw = document.getElementById("raw");
flex.addEventListener("click", function() {
raw.style.display = raw.style.display == "none" ? "block" : "none";
});
</pre>
<pre class="brush: css">#flex-container {
width: 100%;
font-family: Consolas, Arial, sans-serif;
}
#flex-container > div {
border: 1px solid #f00;
padding: 1rem;
}
#flex-container > .raw-item {
border: 1px solid #000;
}
</pre>
</div>
<h3 id="Результат">Результат</h3>
<p>{{EmbedLiveSample('Example','100%','60')}}</p>
<h2 id="Specifications" name="Specifications">Специфікації</h2>
<table class="standard-table">
<thead>
<tr>
<th>Специфікація</th>
<th>Стан</th>
<th>Коментар</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Загальне визначення</td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_із_браузерами">Сумісність із браузерами</h2>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Підтримка</th>
<th>Firefox (Gecko)</th>
<th>Chrome</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>{{CompatGeckoDesktop("18.0")}}<sup>[1]</sup><br>
{{CompatGeckoDesktop("20.0")}}<br>
{{CompatGeckoDesktop("28.0")}}<sup>[2]</sup></td>
<td>21.0{{property_prefix("-webkit")}}<br>
29.0</td>
<td>10.0{{property_prefix("-ms")}}<sup>[3]</sup><br>
11.0<sup>[3]</sup></td>
<td>12.10</td>
<td>
<p>6.1{{property_prefix("-webkit")}}<br>
9.0</p>
</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Підтримка</th>
<th>Firefox Mobile (Gecko)</th>
<th>Android</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Базова підтримка</td>
<td>{{CompatUnknown}}</td>
<td>4.4</td>
<td>11</td>
<td>12.10</td>
<td>7.1{{property_prefix("-webkit")}}</td>
</tr>
</tbody>
</table>
</div>
<p>[1] В Gecko 18.0 {{geckoRelease("18.0")}} та 19.0 {{geckoRelease("19.0")}} підтримка flexbox прихована за налаштуванням <code>about:config</code> пунктом <code>layout.css.flexbox.enabled</code>, котрий по замовчуванню - <code>false</code>. </p>
<p>[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 {{geckoRelease("28.0")}}.</p>
<p>В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 {{geckoRelease("48.0")}} додано підтримку <code>-webkit</code> префіксованої версії властивості з огляду на веб-сумісність з налаштуванням <code>layout.css.prefixes.webkit</code>, котре по замовчуванню дорівнює <code>false.</code> Починаючи з версії Gecko 49.0 {{geckoRelease("49.0")}} це налаштування дорівнює <code>true</code>.</p>
<p>[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> у частині <code>flex </code>синтаксису, що відповідає за властивість <code>flex-basis</code>. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте <a href="https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc">Flexbug #8</a> задля більш детального опису. Визначення <code>flex</code> зі значенням без одиниці виміру у частині, що відповідає за <code>flex-basis</code> вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за <code>flex-basis</code>, скороченого запису <code>flex</code>. Перегляньте <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a> задля більш детільного опису.</p>
<h2 id="See_also" name="See_also">Також варто переглянути</h2>
<ul>
<li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes" title="CSS/Using_CSS_flexible_boxes">Використання гнучких CSS блоків</a></li>
</ul>
|
