From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/flex-grow/index.html | 137 ++++++++++++++++++++++++++++++++++ 1 file changed, 137 insertions(+) create mode 100644 files/ru/web/css/flex-grow/index.html (limited to 'files/ru/web/css/flex-grow/index.html') diff --git a/files/ru/web/css/flex-grow/index.html b/files/ru/web/css/flex-grow/index.html new file mode 100644 index 0000000000..ee742c94f2 --- /dev/null +++ b/files/ru/web/css/flex-grow/index.html @@ -0,0 +1,137 @@ +--- +title: flex-grow +slug: Web/CSS/flex-grow +tags: + - CSS + - CSS Flexible Boxes + - CSS Property + - CSS-свойство + - NeedsContent + - Reference +translation_of: Web/CSS/flex-grow +--- +
{{CSSRef}}
+ +

CSS-свойство flex-grow определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу (flex grow factor — «коэффициент увеличения flex»). Свободное пространство — разница между размером flex-контейнера и размером всех его flex-элементов вместе. Если все sibling-элементы (sibling items — элементы одного уровня вложенности, состоящие по отношению друг к другу в родственной связи как брат или сестра), имеют одинаковый коэффициент flex-grow, то все они получат одинаковую долю свободного пространства, в противном случае оно распределяется в соответствии с соотношением, определенным различными коэффициентами flex-grow.

+ +

На практике flex-grow используется вместе с другими flex-свойствами {{cssxref("flex-shrink")}} и {{cssxref("flex-basis")}}, и обычно определяется с помощью сокращения (shorthand) {{cssxref("flex")}}, чтобы убедиться, что все значения заданы.

+ +
{{EmbedInteractiveExample("pages/css/flex-grow.html")}}
+ + + +

Синтаксис

+ +
/* Значения типа <number>*/
+flex-grow: 3;
+flex-grow: 0.6;
+
+/* Глобальные значения */
+flex-grow: inherit;
+flex-grow: initial;
+flex-grow: unset;
+
+ +

Свойство flex-grow указывается одним числом — значением типа <number>.

+ +

Значения

+ +
+
<number>
+
См. {{cssxref("<number>")}}. Отрицательные значения недопустимы. По умолчанию 0.
+
+ +

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

+ +
{{csssyntax}}
+ +

Пример

+ +

HTML

+ +
+
<h4>Это — Flex-Grow</h4>
+<h5>A,B,C и F имеют коэффициент увеличения flex-grow:1, а D и E — 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('Пример', '700px', '300px', '', 'Web/CSS/flex-grow')}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Flexbox','#flex-grow','flex-grow')}}{{Spec2('CSS3 Flexbox')}}Первичное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ + + +

{{Compat("css.properties.flex-grow")}}

+ +

Смотрите также

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