From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/uk/web/css/flex/index.html | 209 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 files/uk/web/css/flex/index.html (limited to 'files/uk/web/css/flex/index.html') diff --git a/files/uk/web/css/flex/index.html b/files/uk/web/css/flex/index.html new file mode 100644 index 0000000000..763924bf80 --- /dev/null +++ b/files/uk/web/css/flex/index.html @@ -0,0 +1,209 @@ +--- +title: flex +slug: Web/CSS/flex +tags: + - CSS + - CSS Flexible Boxes + - CSS Властивість + - flexbox +translation_of: Web/CSS/flex +--- +
{{CSSRef}}
+ +

Загальний огляд

+ +

CSS параметр flex є скороченим записом властивості, котра визначає здатність flex елемента змінювати свої розміри аби заповнити наявний простір. Flex елементи можна розтягнути аби використати увесь наявний простір пропорційно до вказаного параметра flex-grow, або flex-shrink аби запобігти виходу за межі батьківського контейнера.

+ +

{{cssinfo}}

+ +

Перегляньте Використання гнучких 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;
+
+ +

Значення

+ +
+
<'flex-grow'>
+
Визначає ширину flex елемента відносно ширин всіх сусідніх елементів. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
+
<'flex-shrink'>
+
Визначає flex-shrink flex елемента. Перегляньте {{cssxref("<number>")}} задля детального опису. Від'ємні значення вважаються невірними. Приймає значення 1, коли воно не вказується явно.
+
<'flex-basis'>
+
Визначає  базис flex елемента. Може приймати будь-яке значення, з тих, що можуть приймати параметри width і height. Значення 0 має мати одиницю виміру, аби уникнути трактування його, як значення гнучкості. Приймає значення 0%, коли воно не вказується явно.
+
none
+
Ключове слово, котре по значенню рівне 0 0 auto.
+
+

Формальний синтаксис

+
+
+ +
{{csssyntax}}
+ +

Приклад

+ +
#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;
+}
+
+ +
<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>
+
+ + + +

Результат

+ +

{{EmbedLiveSample('Example','100%','60')}}

+ +

Специфікації

+ + + + + + + + + + + + + + + + +
СпецифікаціяСтанКоментар
{{SpecName('CSS3 Flexbox', '#flex-property', 'flex')}}{{Spec2('CSS3 Flexbox')}}Загальне визначення
+ +

Сумісність із браузерами

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ПідтримкаFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базова підтримка{{CompatGeckoDesktop("18.0")}}[1]
+ {{CompatGeckoDesktop("20.0")}}
+ {{CompatGeckoDesktop("28.0")}}[2]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}}[3]
+ 11.0[3]		12.10 +

6.1{{property_prefix("-webkit")}}
+ 9.0

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ПідтримкаFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Базова підтримка{{CompatUnknown}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1] В Gecko 18.0 {{geckoRelease("18.0")}} та 19.0 {{geckoRelease("19.0")}} підтримка flexbox прихована за налаштуванням about:config пунктом layout.css.flexbox.enabled, котрий по замовчуванню - false. 

+ +

[2] Багатостроковий flexbox підтримується починаючи з Gecko 28.0 {{geckoRelease("28.0")}}.

+ +

В додаток до підтримки непрефіксованого flexbox, у Gecko 48.0 {{geckoRelease("48.0")}} додано підтримку -webkit префіксованої версії властивості з огляду на веб-сумісність з налаштуванням layout.css.prefixes.webkit, котре по замовчуванню дорівнює false. Починаючи з версії Gecko 49.0 {{geckoRelease("49.0")}} це налаштування дорівнює true.

+ +

[3] Internet Explorer 10-11 (але не 12+) ігнорує вживання calc() у частині flex синтаксису, що відповідає за властивість flex-basis. Це можна обійти використанням не сокроченого, а повного запису цієї властивості. Перегляньте Flexbug #8 задля більш детального опису. Визначення flex зі значенням без одиниці виміру у частині, що відповідає за flex-basis вважається синтаксично не вірною у цих версіях, а тому її буде проігноровано. Виправити це можна - завжди додаючи одиницю виміру у частині властивості, що відповідає за flex-basis, скороченого запису flex. Перегляньте Flexbug #4 задля більш детільного опису.

+ +

Також варто переглянути

+ + -- cgit v1.2.3-54-g00ecf