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-grow/index.html | 194 ++++++++++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 files/uk/web/css/flex-grow/index.html (limited to 'files/uk/web/css/flex-grow/index.html') diff --git a/files/uk/web/css/flex-grow/index.html b/files/uk/web/css/flex-grow/index.html new file mode 100644 index 0000000000..05bf7ed70b --- /dev/null +++ b/files/uk/web/css/flex-grow/index.html @@ -0,0 +1,194 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

Опис

+ +

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

+ +

{{cssinfo}}

+ +

Можете більш детальніше довідатся як користуватись властивостями flex з наступної статті Using CSS flexible boxes

+ +

Синтаксис

+ +
/* <number> values */
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Global values */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

Значення

+ +
+
<number>
+
Дивись {{cssxref("<number>")}}. Значення менші за 0 є недійсними.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Приклад

+ +

HTML

+ +
+
<h4>This is a Flex-Grow</h4>
+<h5>A,B,C and F are flex-grow:1 . D and E are flex-grow:2 .</h5>
+<div id="content">
+  <div class="box" style="background-color:red;">A</div>
+  <div class="box" style="background-color:lightblue;">B</div>
+  <div class="box" style="background-color:yellow;">C</div>
+  <div class="box1" style="background-color:brown;">D</div>
+  <div class="box1" style="background-color:lightgreen;">E</div>
+  <div class="box" style="background-color:brown;">F</div>
+</div>
+
+ +

CSS

+ +
#content {
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+
+  -webkit-justify-content: space-around;
+  justify-content: space-around;
+  -webkit-flex-flow: row wrap;
+  flex-flow: row wrap;
+  -webkit-align-items: stretch;
+  align-items: stretch;
+}
+
+.box {
+  flex-grow: 1;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+.box1 {
+  flex-grow: 2;
+  border: 3px solid rgba(0,0,0,.2);
+}
+
+
+ +

Результат

+ +

{{EmbedLiveSample('Example', '750px', '400px', '', 'Web/CSS/flex-grow')}}

+ +

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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Підтримка браузерів

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeEdgeInternet ExplorerOperaSafari
Базова підтримка{{CompatGeckoDesktop("18.0")}}[1]21.0{{property_prefix("-webkit")}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		1112.106.1{{property_prefix("-webkit")}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]49.0{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidEdgeIE PhoneOpera MobileSafari Mobile
Базова підтримка{{CompatGeckoMobile("18.0")}}[1]{{CompatUnknown}}{{CompatVersionUnknown}}{{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}}		{{CompatNo}}12.10{{CompatNo}}
< 0 animate{{CompatGeckoDesktop("32.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Firefox підтримує лише однострочні flexbox конструкції до версії Firefox 27. Щоб активувати підтримку flexbox властивостей, для Firefox 18 та 19, користувачу потрібно змінити параметр layout.css.flexbox.enabled на true у файлі налаштувань about:config.

+ +

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

+ +

[2] До того як вийшла версія Firefox 32, Gecko не був в змозі анімувати знаяення які починалися чи закінчувалися на 0(Spec, Demo).

+ +

Дивись також

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