diff options
Diffstat (limited to 'files/ru/learn/css/css_layout/flexbox/index.html')
| -rw-r--r-- | files/ru/learn/css/css_layout/flexbox/index.html | 8 |
1 files changed, 4 insertions, 4 deletions
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.html index d67eedc31f..46e77bfe72 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.html +++ b/files/ru/learn/css/css_layout/flexbox/index.html @@ -28,7 +28,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <h2 id="Почему_Flexbox">Почему Flexbox?</h2> -<p>Долгое время единственными надёжными инструментами CSS верстки были такие способы как Float (обтекание) и позиционирование.</p> +<p>Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.</p> <p>С их помощью сложно или невозможно достичь следующих простых требований к макету:</p> @@ -44,7 +44,7 @@ translation_of: Learn/CSS/CSS_layout/Flexbox <p>В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">посмотреть его вживую</a>.</p> -<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трехколоночного макета.</p> +<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> @@ -288,7 +288,7 @@ article:nth-of-type(3) { justify-content: space-around; }</pre> -<p>Наконец, мы устанавливаем размер кнопке, мы даем ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> +<p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p> <pre class="brush: css notranslate">button { flex: 1; @@ -309,6 +309,6 @@ article:nth-of-type(3) { <h2 id="Подытожим">Подытожим</h2> -<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим еще один важный аспект макетов CSS - grid-системы.</p> +<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.</p> <div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> |