diff options
author | Carolyn Wu <87150472+cw118@users.noreply.github.com> | 2021-12-16 20:16:30 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-12-16 22:16:30 -0300 |
commit | d5dfc54d019d9bf8f58eeac16e41c2b97496eac9 (patch) | |
tree | 1a52279e6b7d74b54cb7fdb6622719dcb8fd42bc /files/ru/learn/css/css_layout/flexbox/index.html | |
parent | a21fcc6edd373ee68724fbf85e2c3b74d2916b19 (diff) | |
download | translated-content-d5dfc54d019d9bf8f58eeac16e41c2b97496eac9.tar.gz translated-content-d5dfc54d019d9bf8f58eeac16e41c2b97496eac9.tar.bz2 translated-content-d5dfc54d019d9bf8f58eeac16e41c2b97496eac9.zip |
Fix Learn Flexbox image sources (#3331)
* Fix flex_terms.png image source
* Fix remaining external image links
* Remove style for flex_terms.png
Matches image placement/style with en-US
* Revert first ja image source
Reverts to original/correct image source for mistakenly changed flexbox-example1.png in Japanese file
Diffstat (limited to 'files/ru/learn/css/css_layout/flexbox/index.html')
-rw-r--r-- | files/ru/learn/css/css_layout/flexbox/index.html | 16 |
1 files changed, 8 insertions, 8 deletions
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index b675a1ec01..523531379c 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -46,7 +46,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> <h2 id="Определяем_какие_элементы_разместить_в_виде_flex_блоков">Определяем, какие элементы разместить в виде flex блоков</h2> @@ -58,7 +58,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>В результате у нас получится вот так:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> <p>Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.</p> @@ -68,7 +68,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:</p> -<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> +<p><img alt="flex_terms.png" class="default internal" src="flex_terms.png"></p> <ul> <li><strong>Главная ось (main axis)</strong> проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются <strong>main start</strong> и <strong>main end</strong>.</li> @@ -97,7 +97,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> и <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">посмотрите его вживую</a> (сохраните его себе на компьютер, если хотите изучить этот пример):</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> <p>Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:</p> @@ -105,7 +105,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> <p>Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство <code>flex: 200px</code>, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.</p> @@ -154,7 +154,7 @@ article:nth-of-type(3) { <p>Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> +<p><img alt="" src="flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> <p>Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент {{htmlelement("article")}}, макет будет и дальше выглядеть также хорошо.</p> @@ -174,7 +174,7 @@ article:nth-of-type(3) { <p>Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">просмотр</a>) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> +<p><img alt="" src="flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> <p>Сначала сделайте себе копию этого примера.</p> @@ -245,7 +245,7 @@ article:nth-of-type(3) { <p>Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">см. вживую</a>).</p> -<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> +<p><img alt="" src="flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> <p>HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.</p> |