diff options
| author | Alexey Istomin <webistomin@gmail.com> | 2021-03-20 18:37:44 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-03-20 18:37:44 +0300 |
| commit | 841aae260382e2bf5ebb44d765d8c7301d27caab (patch) | |
| tree | 81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/css/css_box_alignment | |
| parent | 730fea852ff827ca034fe17c84288c95d270ec92 (diff) | |
| download | translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2 translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip | |
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter
* docs(ru): resolve conflicts
* refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/web/css/css_box_alignment')
| -rw-r--r-- | files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html | 12 | ||||
| -rw-r--r-- | files/ru/web/css/css_box_alignment/index.html | 16 |
2 files changed, 14 insertions, 14 deletions
diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 3fe63cc24c..b59b71c446 100644 --- a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox --- <div>{{CSSRef}}</div> -<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, ее следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Спецификация <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">Выравнивание Блоков</a> подробно описывает, как выравнивание работает при использовании различных способов разметки.</span> <span title="">На этой странице мы рассмотрим, как работает выравнивание блоков в контексте разметки flexbox.</span> <span title="">Поскольку эта страница предназначена для подробного описания вещей, относящихся к разметке flexbox и выравниванию блоков, её следует читать вместе с основной страницей <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Alignment">выравнивания блоков</a>, в которой подробно описываются общие характеристики выравнивания блоков при использовании разных методах разметки.</span></span></p> <h2 id="Основной_пример">Основной пример</h2> @@ -25,7 +25,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <ul> <li>Главная ось = направление согласно атрибуту <code>flex-direction</code> = выравнивание через атрибут <code>justify-content</code></li> - <li>Поперечная ось = проходит поперек главной оси = выравнивание через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> + <li>Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> </ul> <h3 id="Выравнивание_по_Главной_Оси">Выравнивание по Главной Оси</h3> @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <p><span class="tlid-translation translation" lang="ru"><span title="">Это означает, что атрибут <code>justify-self</code> нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещен и в начало, и в конец.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Использовать атрибут <code>align-self</code> имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.</span></span></p> <h2 id="Выравнивание_и_свойство_margin_auto">Выравнивание и свойство margin: auto</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значением <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своем измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значением <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своём измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> -<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.</span></span></p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}</p> @@ -70,7 +70,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <p><span class="tlid-translation translation" lang="ru"><span title="">На главной оси атрибут <code>column-gap</code> будет создавать разрывы фиксированного размера между соседними элементами.</span><br> <br> - <span title="">На поперечной оси атрибут <code>row-gap</code> создает разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p> + <span title="">На поперечной оси атрибут <code>row-gap</code> создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут <code>flex-wrap</code> в значение <code>wrap</code>, чтобы применить эффект.</span></span></p> <div class="note"> <p><span class="tlid-translation translation" lang="ru"><span title="">Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.</span></span></p> diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html index af449e8cff..e094c861ea 100644 --- a/files/ru/web/css/css_box_alignment/index.html +++ b/files/ru/web/css/css_box_alignment/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <h3 id="Пример_выравнивания_раскладки_сетки_CSS">Пример выравнивания раскладки сетки CSS</h3> -<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путем установки {{cssxref("align-self")}} в центр.</p> +<p>В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью {{cssxref("justify-content")}}. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью {{cssxref("align-items")}}. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки {{cssxref("align-self")}} в центр.</p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-align-items.html", '100%', 500)}}</p> @@ -73,7 +73,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p><strong>Контейнер выравнивания</strong> - это поле, в котором объект выравнивается внутри. Обычно это будет блок, содержащий объект выравнивания. Контейнер выравнивания может содержать один или несколько объектов выравнивания.</p> -<p>На приведенном ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p> +<p>На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.</p> <p><img alt="" src="https://mdn.mozillademos.org/files/15953/align-container-subjects.png" style="height: 170px; width: 248px;"></p> @@ -88,7 +88,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <ul> <li><strong>Positional alignment</strong> (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.</li> <li><strong>Baseline alignment</strong> (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.</li> - <li><strong>Distributed alignment</strong> (распределенное выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li> + <li><strong>Distributed alignment</strong> (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.</li> </ul> <h3 id="Значения_ключевых_слов_позиционирования">Значения ключевых слов позиционирования</h3> @@ -109,7 +109,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Помимо физических значений <code>left</code> и <code>right</code>, которые относятся к физическим атрибутам экрана, все остальные значения являются логическими значениями и относятся к режиму записи содержимого.</p> -<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведет к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведет к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p> +<p>Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение <code>justify-content</code> <code>start</code>, это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение <code>start</code> приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.</p> <p>Оба этих примера имеют <code>justify-content: start</code>, однако местоположение начала изменяется в соответствии с режимом записи.</p> @@ -127,11 +127,11 @@ translation_of: Web/CSS/CSS_Box_Alignment <p>Исходное выравнивание содержимого - указание значения выравнивания базовой линии для <code>justify-content</code> или <code>align-content</code> - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.</p> -<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путем добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p> +<p>Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment - это использование <code>justify-self</code> или <code>align-self</code> или при настройке этих значений в виде группы с <code>justify-items</code> и <code>align-items</code>.</p> <h3 id="Distributed_alignment">Distributed alignment</h3> -<p><strong>Ключевые слова распределенного выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> +<p><strong>Ключевые слова распределённого выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> <ul> <li><code>stretch</code></li> @@ -154,7 +154,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <p><code>safe</code> и <code>unsafe</code> ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово <code>safe</code> будет выравниваться для <code>start</code> в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.</p> -<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведет к такой потере данных.</p> +<p>Если вы укажете <code>unsafe</code>, выравнивание будет выполнено, даже если это приведёт к такой потере данных.</p> <h2 id="Пробелы_между_boxes">Пробелы между boxes</h2> @@ -168,7 +168,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <li>{{cssxref("gap")}}</li> </ul> -<p>В приведенном ниже примере макет сетки использует сокращенную <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p> +<p>В приведённом ниже примере макет сетки использует сокращённую <code>gap</code>, чтобы установить разрыв <code>10px</code> между дорожками строк и <code>2em</code> разрыв между дорожками столбцов.</p> <p>{{EmbedGHLiveSample("css-examples/box-alignment/overview/grid-gap.html", '100%', 500)}}</p> |
