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

Свойство CSS flex-wrap задает правила вывода flex-элементов —  в одну строку или в несколько, с переносом блоков. Если перенос разрешен, то возможно задать направление, в котором выводятся блоки.

+ +
flex-wrap: nowrap;
+flex-wrap: wrap;
+flex-wrap: wrap-reverse;
+
+/* Global values */
+flex-wrap: inherit;
+flex-wrap: initial;
+flex-wrap: unset;
+
+ +

{{cssinfo}}

+ +

Подробнее по свойствам и общей информации смотрите Using CSS flexible boxes.

+ +

Syntax

+ +

Свойство flex-wrap может содержать одно из следующих ниже значений.

+ +

Значения

+ +

Допускаются следующие значения:

+ +
+
nowrap
+
Расположение в одну линию, может привести к переполнению контейнера. Свойство cross-start эквивалентно start или before в зависимости от значения {{cssxref("flex-direction")}}.
+
wrap
+
Расположение в несколько линий. Свойство cross-start эквивалентно start или before в зависимости отзначения flex-direction и свойство cross-end противоположно cross-start.
+
wrap-reverse
+
Ведёт себя так же, как и wrap но cross-start и cross-end инвертированы.
+
+

Formal syntax

+
+
+ +
{{csssyntax}}
+ +

Examples

+ +

HTML

+ +
+
<h4>This is an example for flex-wrap:wrap </h4>
+<div class="content">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:nowrap </h4>
+<div class="content1">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+<h4>This is an example for flex-wrap:wrap-reverse </h4>
+<div class="content2">
+  <div class="red">1</div>
+  <div class="green">2</div>
+  <div class="blue">3</div>
+</div>
+
+ +

CSS

+ +
/* Common Styles */
+.content,
+.content1,
+.content2 {
+    color: #fff;
+    font: 100 24px/100px sans-serif;
+    height: 150px;
+    text-align: center;
+}
+
+.content div,
+.content1 div,
+.content2 div {
+    height: 50%;
+    width: 50%;
+}
+.red {
+    background: orangered;
+}
+.green {
+    background: yellowgreen;
+}
+.blue {
+    background: steelblue;
+}
+
+/* Flexbox Styles */
+.content {
+    display: flex;
+    flex-wrap: wrap;
+}
+.content1 {
+    display: flex;
+    flex-wrap: nowrap;
+}
+.content2 {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+
+
+ +

Results

+ +

{{ EmbedLiveSample('Examples', '700px', '700px', '', 'Web/CSS/flex-wrap') }}

+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ SpecName('CSS3 Flexbox', '#flex-wrap-property', 'flex-wrap') }}{{ Spec2('CSS3 Flexbox') }}
+ +

Browser compatibility

+ +

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

+ +

See also

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