aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/css/css_flexible_box_layout
diff options
context:
space:
mode:
authorAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
committerAlexey Pyltsyn <lex61rus@gmail.com>2021-03-15 14:29:50 +0300
commit55ddd4454665a3c66e3d5b186bc79048468d36e7 (patch)
tree5391f1ae01bbcd484387bbc2373492ac9bc89dbc /files/ru/web/css/css_flexible_box_layout
parent08dc1a1e60063705ccefc1eb4ef0a17d1ddf196b (diff)
downloadtranslated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.gz
translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.tar.bz2
translated-content-55ddd4454665a3c66e3d5b186bc79048468d36e7.zip
Auto fixes
Diffstat (limited to 'files/ru/web/css/css_flexible_box_layout')
-rw-r--r--files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html6
-rw-r--r--files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html2
-rw-r--r--files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html4
-rw-r--r--files/ru/web/css/css_flexible_box_layout/index.html2
-rw-r--r--files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html2
5 files changed, 8 insertions, 8 deletions
diff --git a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
index e28dc11693..3f405f926f 100644
--- a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
+++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html
@@ -119,7 +119,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем
<h2 id="Выравнивание_содержимого_по_главной_оси">Выравнивание содержимого по главной оси</h2>
-<p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обсуловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p>
+<p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обусловлено тем, что с элементами на  главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p>
<p>В нашем первом примере с использованием свойства <code>display: flex</code>, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p>
@@ -167,7 +167,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем
<p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p>
-<p>Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство <code>flex-direction</code>, элементы контейнера выстраиваются в режиме записи вашего языка (<code>ltr</code> или <code>rtl</code>). </p>
+<p>Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство <code>flex-direction</code>, элементы контейнера выстраиваются в режиме записи вашего языка (<code>ltr</code> или <code>rtl</code>). </p>
<p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p>
@@ -191,7 +191,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем
<p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p>
-<p>Вместо этого мы можем выбрать четвёртый элемент (<em>d</em>) и отделить его от первых трёх, задав ему значение <code>auto</code> для <code>margin-left</code>. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает <code>margin-right</code>. Оба свойства со значениями <code>auto</code> отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.</p>
+<p>Вместо этого мы можем выбрать четвёртый элемент (<em>d</em>) и отделить его от первых трёх, задав ему значение <code>auto</code> для <code>margin-left</code>. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает <code>margin-right</code>. Оба свойства со значениями <code>auto</code> отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.</p>
<p>В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс <code>push</code> с заданным <code>margin-left: auto</code>. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. </p>
diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
index 8a4e3ce28b..9c407f61fa 100644
--- a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
+++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html
@@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb
<p>Как  и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.</p>
-<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы всеравно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p>
+<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p>
<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">В 2009</a> спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать <code>display: box</code> и несколько <code>box-*</code> свойств, которые делали то, что сегодня вы понимаете под flexbox.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
index 347d429eb4..23f034fb6f 100644
--- a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
+++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html
@@ -83,9 +83,9 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
<h3 id="Изменение_flex-direction">Изменение flex-direction</h3>
-<p>Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка <code>flex-direction: row-reverse</code> сохранит порядок отображаения элементов вдоль строки, однако начало и конец строки поменяются местами.</p>
+<p>Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка <code>flex-direction: row-reverse</code> сохранит порядок отображения элементов вдоль строки, однако начало и конец строки поменяются местами.</p>
-<p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец стобца поменяются местами.</p>
+<p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец столбца поменяются местами.</p>
<p>В приведенном ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p>
diff --git a/files/ru/web/css/css_flexible_box_layout/index.html b/files/ru/web/css/css_flexible_box_layout/index.html
index d271a2bd8b..0e1d47bc0b 100644
--- a/files/ru/web/css/css_flexible_box_layout/index.html
+++ b/files/ru/web/css/css_flexible_box_layout/index.html
@@ -12,7 +12,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout
---
<p>{{CSSRef}}</p>
-<p><strong>Способ CSS раскладки Flexible Box</strong> (CSS Flexible Box Layout или <strong>Flexbox</strong>) — это способ CSS раскладки, означающий <a href="/ru/docs/Web/CSS/CSS_Box_Model">блочную модель CSS</a>, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложеных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.</p>
+<p><strong>Способ CSS раскладки Flexible Box</strong> (CSS Flexible Box Layout или <strong>Flexbox</strong>) — это способ CSS раскладки, означающий <a href="/ru/docs/Web/CSS/CSS_Box_Model">блочную модель CSS</a>, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложенных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.</p>
<h2 id="Базовый_пример">Базовый пример</h2>
diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
index 0df3168e3a..6a31a4a6ea 100644
--- a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
+++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html
@@ -41,7 +41,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items
<p>В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.</p>
-<p>Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимумальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми стоблцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.</p>
+<p>Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми столбцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.</p>
<p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p>