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

{{ CSSRef("CSS Flexible Boxes") }}

+ +

Резюме

+ +

flex-direction - CSS свойство , указывающее на то,как flex-элементы располагаются во flex-контейнере по главной оси и направлению (normal или reversed).

+ +

Обратите внимание, что значения row и row-reverse зависят от направления flex-контейнера. Если его атрибут dir равен ltr, row представляет собой горизонтальную ось, ориентированную слева направо, а row-reverse - справа налево; если атрибут dir равен rtl, row представляет собой горизонтальную ось, ориентированную справа налево, а row-reverse - слева направо.

+ +

{{cssinfo}}

+ +

См. Using CSS flexible boxes для детализации по свойствам и дополнительной информации.

+ +

Синтаксис

+ +
/* The direction text is laid out in a line */
+flex-direction: row;
+
+/* Как <row>, но наоборот */
+flex-direction: row-reverse;
+
+/* The direction in which lines of text are stacked */
+flex-direction: column;
+
+/* Как <column>, но наоборот */
+flex-direction: column-reverse;
+
+/* Общие значения */
+flex-direction: inherit;
+flex-direction: initial;
+flex-direction: unset;
+
+ +

Значения

+ +

Может принимать следующие значения::

+ +
+
row
+
Главная ось flex-контейнера определена точно так же, как направление текста. Точки main-start и main-end совпадают с направлением контента.
+
row-reverse
+
Ведет себя аналогично row , но точки main-start и main-end поменяны местами.
+
column
+
Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки main-start и main-end такие же, как точки before и after режима записи (writing-mode).
+
column-reverse
+
Ведет себя, как column , но точки main-start и main-end поменяны местами.
+
+ +

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

+ +
{{csssyntax}}
+ +

Пример

+ +
element {
+  flex-direction: row-reverse;
+}
+
+ +

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

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

Поддержка браузеров

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Базовая поддержка{{CompatGeckoDesktop("18.0")}} (behind a pref) [1][2]
+ {{CompatGeckoDesktop("20.0")}}		21.0{{ property_prefix("-webkit") }} +

10 {{ property_prefix("-ms") }}
+ 11

+ 		12.10 +

7 {{ property_prefix("-webkit") }}

+
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ОсобенностьFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Базовая поддержка{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}12.10 +

{{CompatNo}}

+
+
+ +

[1] Для активации поддержки flexbox в Firefox 18 и 19 пользователь должен сменить предпочтение about:config "layout.css.flexbox.enabled" на true.

+ +

[2] Многострочный flexbox поддерживается, начиная с Firefox 28.

+ +

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

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