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

Описание

+ +

Свойство CSS flex - это сокращенное свойство, определяющее способность гибкого элемента растягиваться или сжиматься для заполнения собой доступного свободного пространства. Это свойство устанавливает flex-grow, flex-shrink и flex-basis.

+ +

{{cssinfo}}

+ +

Для более полной информации читайте Использование flex-контейнеров CSS.

+ +

Синтаксис

+ +
/* 0 0 auto */
+flex: none;
+
+/* Одно значение, число без единиц: flex-grow */
+flex: 2;
+
+/* Одно значение, ширина/высота: flex-basis */
+flex: 10em;
+flex: 30px;
+flex: auto;
+flex: content;
+
+/* Два значения: flex-grow | flex-basis */
+flex: 1 30px;
+
+/* Два значения: flex-grow | flex-shrink */
+flex: 2 2;
+
+/* Три значения: flex-grow | flex-shrink | flex-basis */
+flex: 2 2 10%;
+
+/* Глобальные значения */
+flex: inherit;
+flex: initial;
+flex: unset;
+
+ +

Значения

+ +
+
<'flex-grow'>
+
Определяет {{cssxref("flex-grow")}} для флекс элемента. Смотри {{cssxref("<number>")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  0, если не указано.
+
<'flex-shrink'>
+
Определяет {{cssxref("flex-shrink")}} для флекс элемента. Смотри {{cssxref("<number>")}} для большей информации. Негативные значения считаются недействительными. Значение по умолчанию  1, если не указано.
+
<'flex-basis'>
+
Определяет {{cssxref("flex-basis")}} для флекс элемента. Любое корректное значение для высоты(height) и ширины(width) - корректно и для данного свойства. Предпочтительный размер 0 должен иметь единицу измерения, чтобы не восприниматься как гибкий. Значение по умолчанию  0%, если не указано.
+
none
+
Размер элемента устанавливается в соответствии с его свойствами width и height. Он полностью негибкий: не сжимается и не увеличивается по отношению к гибкому контейнеру. Эквивалентно значению "flex: 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('%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D1%80','100%','60')}}

+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Flexbox', '#flex', 'flex')}}{{Spec2('CSS3 Flexbox')}}Initial definition
+ +

Поддержка браузерами

+ +

{{CompatibilityTable()}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatGeckoDesktop("18.0")}} (behind a pref) [1] [2]
+ {{CompatGeckoDesktop("20.0")}} [2][3]		21.0{{property_prefix("-webkit")}}
+ 29.0		10.0{{property_prefix("-ms")}} [3][4]
+ 11.0 [3][4]		12.106.1{{property_prefix("-webkit")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}4.41112.107.1{{property_prefix("-webkit")}}
+
+ +

[1]  Для активации flexbox для Firefox 18 и 19 пользователю неободимо внести следующее изменение:
+ свойство конфигурации "layout.css.flexbox.enabled" вtrue.

+ +

[2] Multi-line flexbox поддерживается Firefox 28.

+ +

[3] Internet Explorer 10-11 (кроме 12+) игонорируют использование calc() во flex-basis части flex синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В Flexbug # 8.

+ +

[4] В Internet Explorer 10-11 (кроме 12+),  объявление flex без единичного значения в его flex-basis части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в flex-basis часть flex . Дополнительную информацию см. В Flexbug #4.

+ +

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

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