From 3d4e7b2a6cac98ed2d57f5f04dfddda6e5fd030d Mon Sep 17 00:00:00 2001 From: Leonid Vinogradov Date: Sun, 8 Sep 2024 20:51:35 +0300 Subject: [PATCH] fix links --- files/ru/learn/css/css_layout/flexbox/index.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/files/ru/learn/css/css_layout/flexbox/index.md b/files/ru/learn/css/css_layout/flexbox/index.md index 64290bfc20db6c..30d4d0ef5ab16a 100644 --- a/files/ru/learn/css/css_layout/flexbox/index.md +++ b/files/ru/learn/css/css_layout/flexbox/index.md @@ -7,9 +7,9 @@ slug: Learn/CSS/CSS_layout/Flexbox Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии. -| Необходимые навыки: | HTML основы (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), знание того, как работает CSS (изучите [Вступление в CSS](/ru/docs/Learn/CSS/First_steps)). | -| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| Цель: | Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов. | +| Необходимые навыки: | HTML основы (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), знание того, как работает CSS (изучите [Вступление в CSS](/en-US/docs/Learn/CSS/First_steps)). | +| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Цель: | Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов. | ## Почему Flexbox? @@ -25,7 +25,7 @@ slug: Learn/CSS/CSS_layout/Flexbox ## Разберём простой пример -В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете [посмотреть его вживую](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html). +В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете [посмотреть его вживую](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html). Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета. @@ -79,7 +79,7 @@ flex-direction: column; ## Перенос строк -Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html) и [посмотрите его вживую](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (сохраните его себе на компьютер, если хотите изучить этот пример): +Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html) и [посмотрите его вживую](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (сохраните его себе на компьютер, если хотите изучить этот пример): ![](flexbox-example3.png) @@ -120,7 +120,7 @@ flex-flow: row wrap; ## Гибкое изменение размеров flex элементов -Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html), или скачайте [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) ([просмотр](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)). +Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html), или скачайте [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) ([просмотр](https://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)). Прежде всего, добавим следующее правило в конец вашего CSS кода: @@ -172,7 +172,7 @@ article:nth-of-type(3) { ## Горизонтальное и вертикальное выравнивание -Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([просмотр](http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу. +Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([просмотр](https://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу. ![](flexbox-example5.png) @@ -245,7 +245,7 @@ button:last-child { ## Вложенные flex блоки -Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([см. вживую](http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)). +Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([см. вживую](https://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)). ![](flexbox-example7.png)