fix(guide): simplify directory structure

guide/russian/certifications/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md

@@ -0,0 +1,35 @@
+---
+title: Add Flex Superpowers to the Tweet Embed
+localeTitle: Добавить Flex Superpowers в Tweet Вставить
+---
+## Добавить Flex Superpowers в Tweet Вставить
+
+Основываясь на [предыдущем вызове](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md) , вам нужно будет добавить свойство в нужные селекторы. Здесь трюк определяет правильный селектор, а затем все, что вам нужно добавить на _дисплей: flex;_ имущество.
+
+Заголовок гарантирует, что изображения, имя, дескриптор и последующие кнопки будут перемещаться горизонтально.
+
+```CSS
+header { 
+    display: flex; 
+ } 
+```
+
+Выравнивает имя и дескриптор, чтобы выглядеть как одно предложение.
+
+```CSS
+header .profile-name { 
+    display:flex; 
+    margin-left: 10px; 
+  } 
+```
+
+Добавление свойства в следующую кнопку вместе с полем будет центрировать кнопку в нужном размере.
+
+```CSS
+header .follow-btn { 
+    display:flex; 
+    margin: 0 0 0 auto; 
+  } 
+```
+
+Эта же идея используется для элементов нижнего колонтитула.

guide/russian/certifications/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md

@@ -0,0 +1,9 @@
+---
+title: Align Elements Using the align-items Property
+localeTitle: Выравнивание элементов Использование элементов выравнивания Свойство
+---
+## Выравнивание элементов Использование элементов выравнивания Свойство
+
+Хотя рекомендуется попробовать различные варианты `align-items` , установка значения в `center` - это единственный способ передать эту проблему.
+
+Во время игры с различными параметрами вы поймете, что `strech` является значением по умолчанию для свойства.

guide/russian/certifications/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property/index.md

@@ -0,0 +1,13 @@
+---
+title: Align Elements Using the justify-content Property
+localeTitle: Выравнивание элементов Использование свойства обоснования-содержимого
+---
+## Выравнивание элементов Использование свойства обоснования-содержимого
+
+Как указано в задаче, чтобы передать ее, вам необходимо установить `justify-content` в центр. Тем не менее, задача состоит в том, чтобы испытать и увидеть, как различные параметры влияют на контент.
+
+`center` : Обеспечит, чтобы ваши дочерние элементы были центрированы в родительском контейнере.  
+`flex-start` : будет толкать все влево.  
+`flex-end` : надавит все на правую сторону.  
+`space-between` : будет толкать первый и последний элементы влево и вправо, и между ними должно быть четное пространство. Если у вас есть нечетные числа элементов, они добавят их в центр и продолжат толкать влево и вправо в зависимости от порядка.  
+`space-around` : будет делать подобное пространство между ними, но вокруг элементов будет одинаковое расстояние, поэтому первое и последнее не будут находиться непосредственно на краю.

guide/russian/certifications/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed/index.md

@@ -0,0 +1,16 @@
+---
+title: Apply the flex-direction Property to Create a Column in the Tweet Embed
+localeTitle: Примените свойство flex-direction для создания столбца в вставке Tweet
+---
+## Примените свойство flex-direction для создания столбца в вставке Tweet
+
+Изменив направление гибкости от значения по умолчанию от строки до столбца, явно добавив свойство в css, ручка будет показана ниже.
+
+```css
+header .profile-name { 
+    display: flex; 
+    flex-direction: column; 
+    margin-left: 10px; 
+  } 
+
+```

guide/russian/certifications/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed/index.md

@@ -0,0 +1,7 @@
+---
+title: Apply the flex-direction Property to Create Rows in the Tweet Embed
+localeTitle: Примените свойство flex-direction для создания строк в вставке Tweet
+---
+## Примените свойство flex-direction для создания строк в вставке Tweet
+
+Цель этой задачи - обеспечить, чтобы дочерние элементы _верхнего_ и _нижнего колонтитула_ выровнялись подряд. Хотя направление по умолчанию - это строка. Лучше всего говорить о своем стиле как можно больше.

guide/russian/certifications/responsive-web-design/css-flexbox/index.md

@@ -0,0 +1,25 @@
+---
+title: CSS Flexbox
+localeTitle: CSS Flexbox
+---
+## CSS Flexbox
+
+Этот набор проблем научит вас основам использования гибких контейнеров. Задачи:
+
+1.  [Используйте дисплей: flex to Position Two Boxes](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md) .
+2.  [Добавить Flex Superpowers к вставке Tweet](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md) .
+3.  [Используйте свойство flex-direction для создания строки](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row/index.md) .
+4.  [Примените свойство flex-direction для создания строк в Embed](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed/index.md) .
+5.  [Используйте свойство flex-direction для создания столбца](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column/index.md) .
+6.  [Примените свойство flex-direction для создания столбца в Embed](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed/index.md) .
+7.  [Выровнять элементы Используя свойство justify-content](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property/index.md) .
+8.  [Используйте свойство justify-content в Tweet Embed](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed/index.md) .
+9.  [Выравнивание элементов Использование свойства align-items](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md) .
+10.  [Используйте свойство align-items в Tweet Embed](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed/index.md) .
+11.  [Используйте свойство flex-wrap для обертывания строки или столбца](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column/index.md) .
+12.  [Используйте свойство flex-shrink для сжимания элементов](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items/index.md) .
+13.  [Используйте свойство flex-grow для расширения элементов](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items/index.md) .
+14.  [Используйте свойство flex-basis для установки начального размера элемента](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item/index.md) .
+15.  [Используйте свойство flex Shorthand](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md) .
+16.  [Используйте свойство «Заказ» для переупорядочения элементов](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items/index.md) .
+17.  [Используйте свойство align-self](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/use-the-align-self-property/index.md) .

guide/russian/certifications/responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes/index.md

@@ -0,0 +1,18 @@
+---
+title: "Use display: flex to Position Two Boxes"
+localeTitle: «Использовать дисплей
+---
+## Использовать дисплей: сгибать до положения двух ящиков
+
+[Flexbox](https://github.com/freecodecamp/guides/tree/master/src/pages/css/layout/flexbox/index.md) - это способ структурирования контента в CSS3, который позволяет создавать сайты-ответчики.
+
+Эта задача состоит в том, чтобы установить первый из шагов при использовании Flexbox. Вам нужно сделать родительский контейнер гибким, добавив _display: flex;_ к его разделу CSS.
+
+Пример:
+
+```CSS
+#main-container { 
+    display: flex; 
+ } 
+
+```

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed/index.md

@@ -0,0 +1,9 @@
+---
+title: Use the align-items Property in the Tweet Embed
+localeTitle: Использовать свойство align-items в Tweet Embed
+---
+## Использовать свойство align-items в Tweet Embed
+
+Как и в [предыдущем вызове](https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/responsive-web-design/css-flexbox/align-elements-using-the-align-items-property/index.md) , вам необходимо установить значение свойства в `center` справа.
+
+Обратите внимание, что это может выглядеть так, как будто ничего не изменилось, но еще раз, чем яснее вы начинаете с вашего стиля, тем меньше побочных эффектов вы увидите, когда ваш CSS становится более сложным.

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-align-self-property/index.md

@@ -0,0 +1,9 @@
+---
+title: Use the align-self Property
+localeTitle: Использовать свойство align-self
+---
+## Использовать свойство align-self
+
+Основной отрыв от этого challege должен быть тот факт, что `float` , `clear` и `vertical-align` не работают на гибких элементах. Вот почему мы имеем свойство flex `align-self` которое принимает те же значения, что и `align-items` и будет иметь приоритет над любыми значениями, установленными более поздним.
+
+Это означает `align-self: center;` будет работать при `align-items: center;` не будет.

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item/index.md

@@ -0,0 +1,22 @@
+---
+title: Use the flex-basis Property to Set the Initial Size of an Item
+localeTitle: Используйте свойство flex-basis для установки начального размера элемента
+---
+## Используйте свойство flex-basis для установки начального размера элемента
+
+Вы можете добиться того же эффекта, что и предыдущие две проблемы с `flax-basis` . После установки подходящих значений вы увидите, что `#box-2` больше, чем `#box-1` до того, как будет применено любое сжатие или увеличение.
+
+```css
+#box-1 { 
+  background-color: dodgerblue; 
+  height: 200px; 
+  flex-basis: 10em; 
+ } 
+ 
+ #box-2 { 
+  background-color: orangered; 
+  height: 200px; 
+  flex-basis: 20em; 
+ } 
+
+```

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column/index.md

@@ -0,0 +1,15 @@
+---
+title: Use the flex-direction Property to Make a Column
+localeTitle: Используйте свойство flex-direction для создания столбца
+---
+## Используйте свойство flex-direction для создания столбца
+
+Чтобы стекировать дочерние элементы вашего гибкого контейнера друг над другом, вы измените направление _гибки_ следующим образом:
+
+```CSS
+#main-container { 
+    display: flex; 
+    flex-direction: column; 
+ } 
+
+```

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row/index.md

@@ -0,0 +1,17 @@
+---
+title: Use the flex-direction Property to Make a Row
+localeTitle: Используйте свойство flex-direction для создания строки
+---
+## Используйте свойство flex-direction для создания строки
+
+Как только у вас есть гибкий контейнер, добавив _display: flex;_ в родительский контейнер, вы можете указать, хотите ли вы, чтобы дети были сложены в ряд, добавив следующее:
+
+```css
+#box-container { 
+    display: flex; /* This makes the flex container */ 
+    height: 500px; 
+    flex-direction: row-reverse; /* This makes the direction be a row with reversed elements */ 
+  } 
+```
+
+Вы заметите, как цвета переключают позиции по умолчанию в контейнерах гибких дисков - это строки, которые вы могли заметить из [примера твита](https://github.com/freecodecamp/guides/tree/master/src/pages/responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed/index.md) .

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items/index.md

@@ -0,0 +1,7 @@
+---
+title: Use the flex-grow Property to Expand Items
+localeTitle: Используйте свойство flex-grow для расширения элементов
+---
+## Используйте свойство flex-grow для расширения элементов
+
+`flex-grow` работает аналогично `flex-shrink` , чем выше число, тем больше он растет. `#box-2` должен быть шире в этом упражнении.

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-flex-shorthand-property/index.md

@@ -0,0 +1,18 @@
+---
+title: Use the flex Shorthand Property
+localeTitle: Используйте свойство flex Shorthand
+---
+## Используйте свойство flex Shorthand
+
+Хотя вы можете настроить свойства `flex-grow` , `flex-shrink` и `flex-basis` индивидуально. если вам когда-либо понадобится видеть значения для всех из них, вы можете сделать это в одной строке, используя следующий формат `flex: flex-grow flex-shrink flex-basis;` ,
+
+Пример:
+
+```css
+#box-1 { 
+    background-color: dodgerblue; 
+    flex: 2 2 150px; 
+    height: 200px; 
+  } 
+
+```

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items/index.md

@@ -0,0 +1,7 @@
+---
+title: Use the flex-shrink Property to Shrink Items
+localeTitle: Используйте свойство flex-shrink для сокращения предметов
+---
+## Используйте свойство flex-shrink для сокращения предметов
+
+При использовании `flex-shrink` чем больше число, тем больше он сжимается. Для этой задачи, дайте правильные значения, вы должны увидеть, что `#box-1` больше, чем `#box-2` .

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column/index.md

@@ -0,0 +1,9 @@
+---
+title: Use the flex-wrap Property to Wrap a Row or Column
+localeTitle: Используйте свойство flex-wrap для обертывания строки или столбца
+---
+## Используйте свойство flex-wrap для обертывания строки или столбца
+
+Установка свойства `flex-wrap` для `wrap` приведет к тому, что столбцы вернутся к указанной ширине, а столбцы gree и black будут разбиты на начало кадра.
+
+Обратите внимание, что установка его для `wrap-reverse` преобразования не приведет к тому, что серое пустое пространство из `#box-container` останется внизу, изменяя порядок столбцов.

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed/index.md

@@ -0,0 +1,14 @@
+---
+title: Use the justify-content Property in the Tweet Embed
+localeTitle: Используйте свойство justify-content в Tweet Embed
+---
+## Используйте свойство justify-content в Tweet Embed
+
+Различные значения для `justify-content` из предыдущего вызова:
+
+*   `flex-start` выравнивает элементы до начала контейнера flex.
+*   `flex-end` выравнивает элементы до конца гибкого контейнера.
+*   `space-between` выравниваниями элементов к центру главной оси с дополнительным пространством между элементами.
+*   `space-around` подобно `space-between` но пространство распределено вокруг всех элементов.
+
+Подробнее [об `justify-content`](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) .

guide/russian/certifications/responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items/index.md

@@ -0,0 +1,19 @@
+---
+title: Use the order Property to Rearrange Items
+localeTitle: Используйте свойство Order для переупорядочения элементов
+---
+## Используйте свойство Order для переупорядочения элементов
+
+Прежде чем вносить какие-либо изменения, обратите внимание на порядок цветов. Вы становитесь синим слева, а красный - справа. После того, как вы установите свойство `order` вы сможете выбрать, какой из них следует отображать, без изменения кода html.
+
+\`\` \`CSS
+
+# box-1 {
+```
+background-color: dodgerblue; 
+ order: 2; 
+ height: 200px; 
+ width: 200px; 
+```
+
+} \`\` \`