fix(curriculum): fix challenges for russian language
This commit is contained in:
Valeriy S
mrugesh
@@ -2,35 +2,40 @@
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Add Flex Superpowers to the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/c9W7MhM
|
||||
forumTopicId: 301100
|
||||
localeTitle: Добавьте суперспособности Flex к компоненту твита
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Справа находится компонент твита, который будет использоваться в качестве практического примера. Некоторые его составные части выглядели бы лучше при другой компоновке. В предыдущей задаче вы познакомились со свойством <code>display: flex</code>. Здесь вы добавите его к нескольким составным частям компонента твита, чтобы начать настройку их позиционирования. </section>
|
||||
<section id='description'>
|
||||
Справа находится компонент твита, который будет использоваться в качестве практического примера. Некоторые его составные части выглядели бы лучше при другой компоновке. В предыдущей задаче вы познакомились со свойством <code>display: flex</code>. Здесь вы добавите его к нескольким составным частям компонента твита, чтобы начать настройку их позиционирования.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>display: flex</code> для всех указанных ниже элементов: обратите внимание, что необходимые селекторы уже есть в коде CSS: <code>header</code>, вложенные в него <code>.profile-name</code>, <code>.follow-btn</code>, <code>h3</code> и <code>h4</code>; <code>footer</code> и вложенный в него <code>.stats</code>. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте CSS свойство <code>display: flex</code> для всех указанных ниже элементов: обратите внимание, что необходимые селекторы уже есть в коде CSS: <code>header</code>, вложенные в него <code>.profile-name</code>, <code>.follow-btn</code>, <code>h3</code> и <code>h4</code>; <code>footer</code> и вложенный в него <code>.stats</code>.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Ваш <code>header</code> должен иметь свойство <code>display</code> со значением flex.
|
||||
testString: 'assert($("header").css("display") == "flex", "Your <code>header</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>footer</code> должен иметь свойство <code>display</code> со значением flex.
|
||||
testString: 'assert($("footer").css("display") == "flex", "Your <code>footer</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>h3</code> должен иметь свойство <code>display</code> со значением flex.
|
||||
testString: 'assert($("h3").css("display") == "flex", "Your <code>h3</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>h4</code> должен иметь свойство <code>display</code> со значением flex.
|
||||
testString: 'assert($("h4").css("display") == "flex", "Your <code>h4</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>.profile-name</code> должен иметь свойство <code>display</code> со значением flex.
|
||||
testString: 'assert($(".profile-name").css("display") == "flex", "Your <code>.profile-name</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>.follow-btn</code> должен иметь свойство <code>display</code> со значением flex.
|
||||
testString: 'assert($(".follow-btn").css("display") == "flex", "Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Ваш <code>.stats</code> должно быть свойство <code>display</code> со значением flex.
|
||||
testString: 'assert($(".stats").css("display") == "flex", "Your <code>.stats</code> should have a <code>display</code> property set to flex.");'
|
||||
- text: Your <code>header</code> should have a <code>display</code> property set to flex.
|
||||
testString: assert($('header').css('display') == 'flex');
|
||||
- text: Your <code>footer</code> should have a <code>display</code> property set to flex.
|
||||
testString: assert($('footer').css('display') == 'flex');
|
||||
- text: Your <code>h3</code> should have a <code>display</code> property set to flex.
|
||||
testString: assert($('h3').css('display') == 'flex');
|
||||
- text: Your <code>h4</code> should have a <code>display</code> property set to flex.
|
||||
testString: assert($('h4').css('display') == 'flex');
|
||||
- text: Your <code>.profile-name</code> should have a <code>display</code> property set to flex.
|
||||
testString: assert($('.profile-name').css('display') == 'flex');
|
||||
- text: Your <code>.follow-btn</code> should have a <code>display</code> property set to flex.
|
||||
testString: assert($('.follow-btn').css('display') == 'flex');
|
||||
- text: Your <code>.stats</code> should have a <code>display</code> property set to flex.
|
||||
testString: assert($('.stats').css('display') == 'flex');
|
||||
|
||||
```
|
||||
|
||||
@@ -136,14 +141,101 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Align Elements Using the align-items Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/c8aggtk
|
||||
forumTopicId: 301101
|
||||
localeTitle: Выравнивание элементов используя свойство align-items
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>align-items</code> похоже на <code>justify-content</code> . Напомним, что свойство <code>justify-content</code> выровняло элементы flex вдоль главной оси. Для рядов главная ось - горизонтальная линия, а для столбцов - вертикальная. Контейнеры Flex также имеют <strong>поперечную ось,</strong> являющуюся противоположностью основной оси. Для рядов поперечная ось вертикальна, а для столбцов поперечная ось горизонтальна. CSS предлагает свойство <code>align-items</code> для выравнивания элементов flex вдоль поперечной оси. Для строки он указывает CSS, как подвинуть элементы во всей строке вверх или вниз внутри контейнера. А для столбца, как подвинуть все элементы влево или вправо внутри контейнера. Различные значения, доступные для <code>align-items</code> включают: <ul><li> <code>flex-start</code> : двигает элементы к началу контейнера flex. Для строк это передвигает элементы в верхнюю часть контейнера. Для столбцов это передвигает элементы в левую часть контейнера. </li><li> <code>flex-end</code> : двигает элементы к концу контейнера flex. Для строк это передвигает элементы в нижнюю часть контейнера. Для столбцов это передвигает элементы в правую часть контейнера. </li><li> <code>center</code> : выравнивание элементов по центру. Для строк это вертикально выравнивает элементы (равное пространство выше и ниже элементов). Для столбцов это горизонтально выравнивает их (равное пространство слева и справа от элементов). </li><li> <code>stretch</code> : растягивает элементы, чтобы заполнить flex контейнер. Например, элементы строк растягиваются, чтобы заполнить flex контейнер сверху вниз. </li><li> <code>baseline</code> : выровнять элементы по их базовым линиям. Базовая линия - это текстовая концепция, думайте об этом как о линии, на которой сидят буквы. </li></ul></section>
|
||||
<section id='description'>
|
||||
Свойство <code>align-items</code> похоже на <code>justify-content</code> . Напомним, что свойство <code>justify-content</code> выровняло элементы flex вдоль главной оси. Для рядов главная ось - горизонтальная линия, а для столбцов - вертикальная. Контейнеры Flex также имеют <strong>поперечную ось,</strong> являющуюся противоположностью основной оси. Для рядов поперечная ось вертикальна, а для столбцов поперечная ось горизонтальна. CSS предлагает свойство <code>align-items</code> для выравнивания элементов flex вдоль поперечной оси. Для строки он указывает CSS, как подвинуть элементы во всей строке вверх или вниз внутри контейнера. А для столбца, как подвинуть все элементы влево или вправо внутри контейнера. Различные значения, доступные для <code>align-items</code> включают: <ul><li> <code>flex-start</code> : двигает элементы к началу контейнера flex. Для строк это передвигает элементы в верхнюю часть контейнера. Для столбцов это передвигает элементы в левую часть контейнера. </li><li> <code>flex-end</code> : двигает элементы к концу контейнера flex. Для строк это передвигает элементы в нижнюю часть контейнера. Для столбцов это передвигает элементы в правую часть контейнера. </li><li> <code>center</code> : выравнивание элементов по центру. Для строк это вертикально выравнивает элементы (равное пространство выше и ниже элементов). Для столбцов это горизонтально выравнивает их (равное пространство слева и справа от элементов). </li><li> <code>stretch</code> : растягивает элементы, чтобы заполнить flex контейнер. Например, элементы строк растягиваются, чтобы заполнить flex контейнер сверху вниз. </li><li> <code>baseline</code> : выровнять элементы по их базовым линиям. Базовая линия - это текстовая концепция, думайте об этом как о линии, на которой сидят буквы. </li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Пример помогает показать это свойство в действии. Добавьте свойство CSS <code>align-items</code> в элемент <code>#box-container</code> и присвойте ему значение center. <strong>Бонус</strong> <br> Попробуйте другие значения свойства <code>align-items</code> в редакторе кода, чтобы увидеть их различия. Но обратите внимание, что значение center является единственным, которое пройдет эту задачу. </section>
|
||||
<section id='instructions'>
|
||||
Пример помогает показать это свойство в действии. Добавьте свойство CSS <code>align-items</code> в элемент <code>#box-container</code> и присвойте ему значение center. <strong>Бонус</strong> <br> Попробуйте другие значения свойства <code>align-items</code> в редакторе кода, чтобы увидеть их различия. Но обратите внимание, что значение center является единственным, которое пройдет эту задачу.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>align-items</code> заданное значением center.'
|
||||
testString: 'assert($("#box-container").css("align-items") == "center", "The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.");'
|
||||
- text: The <code>#box-container</code> element should have an <code>align-items</code> property set to a value of center.
|
||||
testString: assert($('#box-container').css('align-items') == 'center');
|
||||
|
||||
```
|
||||
|
||||
@@ -59,14 +64,36 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
align-items: center;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 200px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 200px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"><p>Hello</p></div>
|
||||
<div id="box-2"><p>Goodbye</p></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Align Elements Using the justify-content Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/c43gnHm
|
||||
forumTopicId: 301102
|
||||
localeTitle: Выравните элементы используя свойство justify-content
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Иногда flex элементы в контейнере flex не заполняют все пространство в контейнере. Обычно хочется сказать CSS, как выровнять и раздвинуть элементы flex определенным образом. К счастью, свойство <code>justify-content</code> имеет несколько вариантов для этого. Но сначала, перед тем, как рассмотреть эти варианты, необходимо понять важную терминологию. <a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Вот полезное изображение, показывающее строку, иллюстрирующую приведенные ниже концепции.</a> Напомним, что установка flex контейнера в качестве строки помещает flex элементы бок о бок слева направо. Flex контейнер, установленный в качестве столбца, размещает flex элементы вертикально сверху вниз. Направление расположения flex элементов называется <strong>главной осью</strong> . Для строки это горизонтальная линия, проходящая через каждый элемент. А для столбца главная ось - вертикальная линия через элементы. Существует несколько вариантов того, как перемещать flex элементы вдоль линии, являющейся главной осью. Одним из наиболее часто используемых является <code>justify-content: center;</code> , который выравнивает все flex элементы по центру внутри flex контейнера. Другие варианты включают: <ul><li> <code>flex-start</code> : располагает элементы к началу flex контейнера. Для строки это подталкивает элементы к левой стороне контейнера. Для столбца это подталкивает элементы к верхней стороне контейнера. </li><li> <code>flex-end</code> : располагает элементы к концу flex контейнера. Для строки это подталкивает элементы к правой части контейнера. Для столбца это подталкивает элементы к нижней части контейнера. </li><li> <code>space-between</code> : выравнивает элементы по центру главной оси, распеределяя оставшееся пространство между элементами. Первый и последний элементы располагаются вплотную к краям flex контейнера. Например, в строке первый элемент находится у левой стороны контейнера, последний элемент находится у правой стороны контейнера, а остальные элементы между ними расположены равномерно. </li><li> <code>space-around</code> : аналогично <code>space-between</code>, но первый и последний элементы не привязаны к краям контейнера, пространство распределяется вокруг всех элементов </li></ul></section>
|
||||
<section id='description'>
|
||||
Иногда flex элементы в контейнере flex не заполняют все пространство в контейнере. Обычно хочется сказать CSS, как выровнять и раздвинуть элементы flex определенным образом. К счастью, свойство <code>justify-content</code> имеет несколько вариантов для этого. Но сначала, перед тем, как рассмотреть эти варианты, необходимо понять важную терминологию. <a href="https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg" target="_blank">Вот полезное изображение, показывающее строку, иллюстрирующую приведенные ниже концепции.</a> Напомним, что установка flex контейнера в качестве строки помещает flex элементы бок о бок слева направо. Flex контейнер, установленный в качестве столбца, размещает flex элементы вертикально сверху вниз. Направление расположения flex элементов называется <strong>главной осью</strong> . Для строки это горизонтальная линия, проходящая через каждый элемент. А для столбца главная ось - вертикальная линия через элементы. Существует несколько вариантов того, как перемещать flex элементы вдоль линии, являющейся главной осью. Одним из наиболее часто используемых является <code>justify-content: center;</code> , который выравнивает все flex элементы по центру внутри flex контейнера. Другие варианты включают: <ul><li> <code>flex-start</code> : располагает элементы к началу flex контейнера. Для строки это подталкивает элементы к левой стороне контейнера. Для столбца это подталкивает элементы к верхней стороне контейнера. </li><li> <code>flex-end</code> : располагает элементы к концу flex контейнера. Для строки это подталкивает элементы к правой части контейнера. Для столбца это подталкивает элементы к нижней части контейнера. </li><li> <code>space-between</code> : выравнивает элементы по центру главной оси, распеределяя оставшееся пространство между элементами. Первый и последний элементы располагаются вплотную к краям flex контейнера. Например, в строке первый элемент находится у левой стороны контейнера, последний элемент находится у правой стороны контейнера, а остальные элементы между ними расположены равномерно. </li><li> <code>space-around</code> : аналогично <code>space-between</code>, но первый и последний элементы не привязаны к краям контейнера, пространство распределяется вокруг всех элементов </li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Пример помогает показать это свойство в действии. Добавьте свойство <code>justify-content</code> CSS в элемент <code>#box-container</code> и присвойте ему значение center. <strong>Бонус</strong> <br> Попробуйте другие параметры для свойства <code>justify-content</code> в редакторе кода, чтобы увидеть их различия. Но обратите внимание, что значение center является единственным, которое пройдет эту задачу. </section>
|
||||
<section id='instructions'>
|
||||
Пример помогает показать это свойство в действии. Добавьте свойство <code>justify-content</code> CSS в элемент <code>#box-container</code> и присвойте ему значение center. <strong>Бонус</strong> <br> Попробуйте другие параметры для свойства <code>justify-content</code> в редакторе кода, чтобы увидеть их различия. Но обратите внимание, что значение center является единственным, которое пройдет эту задачу.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>justify-content</code> заданное значением center.'
|
||||
testString: 'assert($("#box-container").css("justify-content") == "center", "The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.");'
|
||||
- text: The <code>#box-container</code> element should have a <code>justify-content</code> property set to a value of center.
|
||||
testString: assert($('#box-container').css('justify-content') == 'center');
|
||||
|
||||
```
|
||||
|
||||
@@ -59,14 +64,36 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
justify-content: center;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Apply the flex-direction Property to Create a Column in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cnzdVC9
|
||||
forumTopicId: 301103
|
||||
localeTitle: Примените свойство flex-direction для создания столбца в вставке твита
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"><code>header</code> и <code>footer</code> вставки твита ранее использовали свойство <code>flex-direction</code> со значением row. Схожим образом, элементы внутри <code>.profile-name</code> будут хорошо сгруппированы в виде столбца. </section>
|
||||
<section id='description'>
|
||||
<code>header</code> и <code>footer</code> вставки твита ранее использовали свойство <code>flex-direction</code> со значением row. Схожим образом, элементы внутри <code>.profile-name</code> будут хорошо сгруппированы в виде столбца.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>flex-direction</code> к элементу <code>.profile-name</code> заголовка и установите значение column. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте CSS свойство <code>flex-direction</code> к элементу <code>.profile-name</code> заголовка и установите значение column.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>.profile-name</code> должен иметь свойство <code>flex-direction</code>со значением установленным в column.
|
||||
testString: 'assert($(".profile-name").css("flex-direction") == "column", "The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
- text: The <code>.profile-name</code> element should have a <code>flex-direction</code> property set to column.
|
||||
testString: assert($('.profile-name').css('flex-direction') == 'column');
|
||||
|
||||
```
|
||||
|
||||
@@ -123,14 +128,100 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Apply the flex-direction Property to Create Rows in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cJb8yuq
|
||||
forumTopicId: 301104
|
||||
localeTitle: Примените свойство flex-direction для размещения составных частей компонента твит рядами
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Элементы <code>header</code> и <code>footer</code> компонента твит имеют дочерние элементы, которые можно разместить в ряд используя свойство <code>flex-direction</code>. Это CSS свойство выровняет их по горизонтали. </section>
|
||||
<section id='description'>
|
||||
Элементы <code>header</code> и <code>footer</code> компонента твит имеют дочерние элементы, которые можно разместить в ряд используя свойство <code>flex-direction</code>. Это CSS свойство выровняет их по горизонтали.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>flex-direction</code> к <code>header</code> и <code>footer</code> и задайте ему значение row. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте CSS свойство <code>flex-direction</code> к <code>header</code> и <code>footer</code> и задайте ему значение row.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: <code>header</code> должен иметь свойство <code>flex-direction</code> со значением row.
|
||||
testString: 'assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>header</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
- text: <code>footer</code> должен иметь свойство <code>flex-direction</code> со значением row.
|
||||
testString: 'assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g), "The <code>footer</code> should have a <code>flex-direction</code> property set to row.");'
|
||||
- text: The <code>header</code> should have a <code>flex-direction</code> property set to row.
|
||||
testString: assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
- text: The <code>footer</code> should have a <code>flex-direction</code> property set to row.
|
||||
testString: assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -128,14 +133,103 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Use display: flex to Position Two Boxes'
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cgz3QS7
|
||||
forumTopicId: 301105
|
||||
localeTitle: 'Используйте display: flex для позиционирования двух прямоугольников'
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Задачи этого раздела призваны научить использовать CSS для "гибкого" позиционирования элементов. Вначале будет объяснена теорию. Затем нужно будет практически применить концепцию flexbox для оформления простого компонента твита. Применение CSS свойства <code>display: flex;</code> к элементу позволяет затем использовать другие свойства flex для создания отзывчивого дизайна страницы. </section>
|
||||
<section id='description'>
|
||||
Задачи этого раздела призваны научить использовать CSS для "гибкого" позиционирования элементов. Вначале будет объяснена теорию. Затем нужно будет практически применить концепцию flexbox для оформления простого компонента твита. Применение CSS свойства <code>display: flex;</code> к элементу позволяет затем использовать другие свойства flex для создания отзывчивого дизайна страницы.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>display</code> элементу <code>#box-container</code> и установите его значение равным flex. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте CSS свойство <code>display</code> элементу <code>#box-container</code> и установите его значение равным flex.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Для элемента <code>#box-container</code> должно быть задано свойство <code>display</code> со значением flex.'
|
||||
testString: 'assert($("#box-container").css("display") == "flex", "<code>#box-container</code> should have the <code>display</code> property set to a value of flex.");'
|
||||
- text: <code>#box-container</code> should have the <code>display</code> property set to a value of flex.
|
||||
testString: assert($('#box-container').css('display') == 'flex');
|
||||
|
||||
```
|
||||
|
||||
@@ -40,14 +45,12 @@ tests:
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
|
||||
}
|
||||
</style>
|
||||
<div id="box-container">
|
||||
@@ -59,14 +62,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Use the align-items Property in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cd3PNfq
|
||||
forumTopicId: 301106
|
||||
localeTitle: Использовать свойство align-items в Tweet Embed
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача привела свойство <code>align-items</code> и привела пример. Это свойство может быть применено к нескольким элементам вставки tweet для выравнивания элементов flex внутри них. </section>
|
||||
<section id='description'>
|
||||
Последняя задача привела свойство <code>align-items</code> и привела пример. Это свойство может быть применено к нескольким элементам вставки tweet для выравнивания элементов flex внутри них.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>align-items</code> свойств CSS в элемент <code>.follow-btn</code> . Установите значение в центр. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте <code>align-items</code> свойств CSS в элемент <code>.follow-btn</code> . Установите значение в центр.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Элемент <code>.follow-btn</code> должен иметь свойство <code>align-items</code> заданное значением центра.
|
||||
testString: 'assert($(".follow-btn").css("align-items") == "center", "The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.");'
|
||||
- text: The <code>.follow-btn</code> element should have the <code>align-items</code> property set to a value of center.
|
||||
testString: assert($('.follow-btn').css('align-items') == 'center');
|
||||
|
||||
```
|
||||
|
||||
@@ -61,7 +66,6 @@ tests:
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
@@ -126,14 +130,102 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Use the align-self Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cMbvzfv
|
||||
forumTopicId: 301107
|
||||
localeTitle: Использовать свойство align-self
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Конечным свойством для элементов flex является <code>align-self</code> . Это свойство позволяет настраивать выравнивание каждого элемента отдельно, вместо того, чтобы устанавливать их все одновременно. Это полезно, так как другие общие методы настройки с использованием свойств CSS <code>float</code> , <code>clear</code> и <code>vertical-align</code> не работают на гибких элементах. <code>align-self</code> принимает те же значения, что и <code>align-items</code> и отменяет любое значение, заданное свойством <code>align-items</code> . </section>
|
||||
<section id='description'>
|
||||
Конечным свойством для элементов flex является <code>align-self</code> . Это свойство позволяет настраивать выравнивание каждого элемента отдельно, вместо того, чтобы устанавливать их все одновременно. Это полезно, так как другие общие методы настройки с использованием свойств CSS <code>float</code> , <code>clear</code> и <code>vertical-align</code> не работают на гибких элементах. <code>align-self</code> принимает те же значения, что и <code>align-items</code> и отменяет любое значение, заданное свойством <code>align-items</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>align-self</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение центра и дайте <code>#box-2</code> значение flex-end. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство CSS <code>align-self</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение центра и дайте <code>#box-2</code> значение flex-end.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>align-self</code> равное значению центра.'
|
||||
testString: 'assert($("#box-1").css("align-self") == "center", "The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>align-self</code> равное значению flex-end.'
|
||||
testString: 'assert($("#box-2").css("align-self") == "flex-end", "The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.");'
|
||||
- text: The <code>#box-1</code> element should have the <code>align-self</code> property set to a value of center.
|
||||
testString: assert($('#box-1').css('align-self') == 'center');
|
||||
- text: The <code>#box-2</code> element should have the <code>align-self</code> property set to a value of flex-end.
|
||||
testString: assert($('#box-2').css('align-self') == 'flex-end');
|
||||
|
||||
```
|
||||
|
||||
@@ -61,14 +66,36 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
align-self: center;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
align-self: flex-end;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,29 +2,34 @@
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Use the flex-basis Property to Set the Initial Size of an Item
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/c3d9nCa
|
||||
forumTopicId: 301108
|
||||
localeTitle: Используйте свойство flex-basis для установки начального размера элемента
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>flex-basis</code> указывает начальный размер элемента до того, как CSS выполнит корректировки с <code>flex-shrink</code> или <code>flex-grow</code> . Единицы, используемые свойством <code>flex-basis</code> такие же, как и другие свойства размера ( <code>px</code> , <code>em</code> , <code>%</code> и т. Д.). Значение <code>auto</code> определяет размеры элементов на основе содержимого. </section>
|
||||
<section id='description'>
|
||||
Свойство <code>flex-basis</code> указывает начальный размер элемента до того, как CSS выполнит корректировки с <code>flex-shrink</code> или <code>flex-grow</code> . Единицы, используемые свойством <code>flex-basis</code> такие же, как и другие свойства размера ( <code>px</code> , <code>em</code> , <code>%</code> и т. Д.). Значение <code>auto</code> определяет размеры элементов на основе содержимого.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Установите начальный размер ящиков с использованием <code>flex-basis</code> . Добавьте свойство CSS <code>flex-basis</code> как в <code>#box-1</code> и в <code>#box-2</code> . Дайте <code>#box-1</code> значение <code>10em</code> и <code>#box-2</code> значение <code>20em</code> . </section>
|
||||
<section id='instructions'>
|
||||
Установите начальный размер ящиков с использованием <code>flex-basis</code> . Добавьте свойство CSS <code>flex-basis</code> как в <code>#box-1</code> и в <code>#box-2</code> . Дайте <code>#box-1</code> значение <code>10em</code> и <code>#box-2</code> значение <code>20em</code> .
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-1").css("flex-basis") != "auto", "The <code>#box-1</code> element should have a <code>flex-basis</code> property.");'
|
||||
- text: '<code>#box-1</code> элемент должен иметь <code>flex-basis</code> значение <code>10em</code> .'
|
||||
testString: 'assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g), "The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex-basis</code> .'
|
||||
testString: 'assert($("#box-2").css("flex-basis") != "auto", "The <code>#box-2</code> element should have the <code>flex-basis</code> property.");'
|
||||
- text: '<code>#box-2</code> элемент должен иметь <code>flex-basis</code> значение <code>20em</code> .'
|
||||
testString: 'assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g), "The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.");'
|
||||
- text: The <code>#box-1</code> element should have a <code>flex-basis</code> property.
|
||||
testString: assert($('#box-1').css('flex-basis') != 'auto');
|
||||
- text: The <code>#box-1</code> element should have a <code>flex-basis</code> value of <code>10em</code>.
|
||||
testString: assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
- text: The <code>#box-2</code> element should have the <code>flex-basis</code> property.
|
||||
testString: assert($('#box-2').css('flex-basis') != 'auto');
|
||||
- text: The <code>#box-2</code> element should have a <code>flex-basis</code> value of <code>20em</code>.
|
||||
testString: assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -64,14 +69,35 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
flex-basis: 10em;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
flex-basis: 20em;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Use the flex-direction Property to Make a Column
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cZmWeA4
|
||||
forumTopicId: 301109
|
||||
localeTitle: Используйте свойство flex-direction для создания столбца
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> В предыдущих задачах свойство <code>flex-direction</code> использовалось для создание рядов. С помощью этого свойства также можно создавать столбцы, размещая дочерние элементы "гибкого" контейнера вертикально один под другим. </section>
|
||||
<section id='description'>
|
||||
В предыдущих задачах свойство <code>flex-direction</code> использовалось для создание рядов. С помощью этого свойства также можно создавать столбцы, размещая дочерние элементы "гибкого" контейнера вертикально один под другим.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>flex-direction</code> к элементу <code>#box-container</code> и задайте ему значение column. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте CSS свойство <code>flex-direction</code> к элементу <code>#box-container</code> и задайте ему значение column.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>flex-direction</code> со значением column.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "column", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.");'
|
||||
- text: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to column.
|
||||
testString: assert($('#box-container').css('flex-direction') == 'column');
|
||||
|
||||
```
|
||||
|
||||
@@ -58,14 +63,35 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
flex-direction: column;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Use the flex-direction Property to Make a Row
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cBEkbfJ
|
||||
forumTopicId: 301110
|
||||
localeTitle: Используйте свойство flex-direction для создания строки
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Добавление <code>display: flex</code> к элементу превращает его в гибкий контейнер. Это позволяет разместить любые дочерние элементы этого элемента в строки или в столбцы. Чтобы сделать это, нужно добавить свойство <code>flex-direction</code> к родительскому элементу и устанавить ему значение row (строка) или column (столбец). Значение row выравнивает дочерние элементы по горизонтали, а значение column выравнивает дочерние элементы по вертикали. Другие варианты значений свойства <code>flex-direction</code> - row-reverse (обращённая строка) и column-reverse (обращённый столбец). <strong>Примечание</strong> <br> Значением по умолчанию для свойства <code>flex-direction</code> является row. </section>
|
||||
<section id='description'>
|
||||
Добавление <code>display: flex</code> к элементу превращает его в гибкий контейнер. Это позволяет разместить любые дочерние элементы этого элемента в строки или в столбцы. Чтобы сделать это, нужно добавить свойство <code>flex-direction</code> к родительскому элементу и устанавить ему значение row (строка) или column (столбец). Значение row выравнивает дочерние элементы по горизонтали, а значение column выравнивает дочерние элементы по вертикали. Другие варианты значений свойства <code>flex-direction</code> - row-reverse (обращённая строка) и column-reverse (обращённый столбец). <strong>Примечание</strong> <br> Значением по умолчанию для свойства <code>flex-direction</code> является row.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте CSS свойство <code>flex-direction</code> элементу <code>#box-container</code> и присвойте ему значение row-reverse. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте CSS свойство <code>flex-direction</code> элементу <code>#box-container</code> и присвойте ему значение row-reverse.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>flex-direction</code> со значением row-reverse.'
|
||||
testString: 'assert($("#box-container").css("flex-direction") == "row-reverse", "The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.");'
|
||||
- text: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.
|
||||
testString: assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
|
||||
```
|
||||
|
||||
@@ -58,14 +63,35 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: Use the flex-grow Property to Expand Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/c2p78cg
|
||||
forumTopicId: 301111
|
||||
localeTitle: Используйте свойство flex-grow для расширения элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Противоположность <code>flex-shrink</code> - свойство <code>flex-grow</code> . Напомним, что <code>flex-shrink</code> контролирует размер предметов при сжатии контейнера. Свойство <code>flex-grow</code> управляет размером элементов, когда родительский контейнер расширяется. Используя аналогичный пример из последней задачи, если один элемент имеет значение <code>flex-grow</code> 1, а другое имеет значение <code>flex-grow</code> 3, то значение со значением 3 будет расти в три раза больше, чем другое. </section>
|
||||
<section id='description'>
|
||||
Противоположность <code>flex-shrink</code> - свойство <code>flex-grow</code> . Напомним, что <code>flex-shrink</code> контролирует размер предметов при сжатии контейнера. Свойство <code>flex-grow</code> управляет размером элементов, когда родительский контейнер расширяется. Используя аналогичный пример из последней задачи, если один элемент имеет значение <code>flex-grow</code> 1, а другое имеет значение <code>flex-grow</code> 3, то значение со значением 3 будет расти в три раза больше, чем другое.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>flex-grow</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 1 и <code>#box-2</code> значение 2. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство CSS <code>flex-grow</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 1 и <code>#box-2</code> значение 2.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: ''
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "1", "The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex-grow</code> равное 2.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "2", "The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.");'
|
||||
- text: The <code>#box-1</code> element should have the <code>flex-grow</code> property set to a value of 1.
|
||||
testString: assert($('#box-1').css('flex-grow') == '1');
|
||||
- text: The <code>#box-2</code> element should have the <code>flex-grow</code> property set to a value of 2.
|
||||
testString: assert($('#box-2').css('flex-grow') == '2');
|
||||
|
||||
```
|
||||
|
||||
@@ -60,14 +65,35 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
flex-grow: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,27 +2,32 @@
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: Use the flex Shorthand Property
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cbpW2tE
|
||||
forumTopicId: 301112
|
||||
localeTitle: Используйте свойство flex Shorthand
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Существует возможность быстрого выбора нескольких свойств гибкости сразу. Свойства <code>flex-grow</code> , <code>flex-shrink</code> и <code>flex-basis</code> можно объединить, используя свойство <code>flex</code> . Например, <code>flex: 1 0 10px;</code> установит элемент для <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , и <code>flex-basis: 10px;</code> , Настройки свойств по умолчанию - <code>flex: 0 1 auto;</code> , </section>
|
||||
<section id='description'>
|
||||
Существует возможность быстрого выбора нескольких свойств гибкости сразу. Свойства <code>flex-grow</code> , <code>flex-shrink</code> и <code>flex-basis</code> можно объединить, используя свойство <code>flex</code> . Например, <code>flex: 1 0 10px;</code> установит элемент для <code>flex-grow: 1;</code> , <code>flex-shrink: 0;</code> , и <code>flex-basis: 10px;</code> , Настройки свойств по умолчанию - <code>flex: 0 1 auto;</code> ,
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>flex</code> и к <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значения, поэтому его <code>flex-grow</code> равен 2, его <code>flex-shrink</code> равен 2, а его <code>flex-basis</code> - 150 пикселей. Дайте <code>#box-2</code> значения, поэтому его <code>flex-grow</code> равен 1, его <code>flex-shrink</code> равен 1, а его <code>flex-basis</code> - 150 пикселей. Эти значения приведут к тому, что <code>#box-1</code> будет расти, чтобы заполнить дополнительное пространство с удвоенной скоростью <code>#box-2</code> когда контейнер больше 300 пикселей, и с удвоенной скоростью <code>#box-2</code> когда контейнер меньше 300 пикселей. 300px - это комбинированный размер значений <code>flex-basis</code> двух полей. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство CSS <code>flex</code> и к <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значения, поэтому его <code>flex-grow</code> равен 2, его <code>flex-shrink</code> равен 2, а его <code>flex-basis</code> - 150 пикселей. Дайте <code>#box-2</code> значения, поэтому его <code>flex-grow</code> равен 1, его <code>flex-shrink</code> равен 1, а его <code>flex-basis</code> - 150 пикселей. Эти значения приведут к тому, что <code>#box-1</code> будет расти, чтобы заполнить дополнительное пространство с удвоенной скоростью <code>#box-2</code> когда контейнер больше 300 пикселей, и с удвоенной скоростью <code>#box-2</code> когда контейнер меньше 300 пикселей. 300px - это комбинированный размер значений <code>flex-basis</code> двух полей.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>flex</code> равное 2 2 150px.'
|
||||
testString: 'assert($("#box-1").css("flex-grow") == "2" && $("#box-1").css("flex-shrink") == "2" && $("#box-1").css("flex-basis") == "150px", "The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex</code> равное 1 1 150px.'
|
||||
testString: 'assert($("#box-2").css("flex-grow") == "1" && $("#box-2").css("flex-shrink") == "1" && $("#box-2").css("flex-basis") == "150px", "The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.");'
|
||||
- text: 'Ваш код должен использовать свойство <code>flex</code> для <code>#box-1</code> и <code>#box-2</code> .'
|
||||
testString: 'assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2, "Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.");'
|
||||
- text: The <code>#box-1</code> element should have the <code>flex</code> property set to a value of 2 2 150px.
|
||||
testString: assert($('#box-1').css('flex-grow') == '2' && $('#box-1').css('flex-shrink') == '2' && $('#box-1').css('flex-basis') == '150px');
|
||||
- text: The <code>#box-2</code> element should have the <code>flex</code> property set to a value of 1 1 150px.
|
||||
testString: assert($('#box-2').css('flex-grow') == '1' && $('#box-2').css('flex-shrink') == '1' && $('#box-2').css('flex-basis') == '150px');
|
||||
- text: Your code should use the <code>flex</code> property for <code>#box-1</code> and <code>#box-2</code>.
|
||||
testString: assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
|
||||
```
|
||||
|
||||
@@ -61,14 +66,34 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
flex: 2 2 150px;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
flex: 1 1 150px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: Use the flex-shrink Property to Shrink Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cd3PBfr
|
||||
forumTopicId: 301113
|
||||
localeTitle: Используйте свойство flex-shrink для сокращения предметов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> До сих пор все свойства в задачах применимы к контейнеру flex (родительский элемент гибких элементов). Однако для гибких элементов существует несколько полезных свойств. Первый - свойство <code>flex-shrink</code> . Когда он используется, он позволяет сжимать элемент, если контейнер гибкого контейнера слишком мал. Элементы сокращаются, когда ширина родительского контейнера меньше, чем объединенная ширина всех элементов гибкости внутри него. Свойство <code>flex-shrink</code> принимает числа как значения. Чем больше число, тем больше он будет уменьшаться по сравнению с другими элементами в контейнере. Например, если один элемент имеет значение <code>flex-shrink</code> 1, а другое имеет значение <code>flex-shrink</code> 3, то значение со значением 3 будет уменьшаться в три раза больше, чем другое. </section>
|
||||
<section id='description'>
|
||||
До сих пор все свойства в задачах применимы к контейнеру flex (родительский элемент гибких элементов). Однако для гибких элементов существует несколько полезных свойств. Первый - свойство <code>flex-shrink</code> . Когда он используется, он позволяет сжимать элемент, если контейнер гибкого контейнера слишком мал. Элементы сокращаются, когда ширина родительского контейнера меньше, чем объединенная ширина всех элементов гибкости внутри него. Свойство <code>flex-shrink</code> принимает числа как значения. Чем больше число, тем больше он будет уменьшаться по сравнению с другими элементами в контейнере. Например, если один элемент имеет значение <code>flex-shrink</code> 1, а другое имеет значение <code>flex-shrink</code> 3, то значение со значением 3 будет уменьшаться в три раза больше, чем другое.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство CSS <code>flex-shrink</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 1 и <code>#box-2</code> значение 2. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство CSS <code>flex-shrink</code> в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 1 и <code>#box-2</code> значение 2.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>flex-shrink</code> установленное в значение 1.'
|
||||
testString: 'assert($("#box-1").css("flex-shrink") == "1", "The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>flex-shrink</code> равное 2.'
|
||||
testString: 'assert($("#box-2").css("flex-shrink") == "2", "The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.");'
|
||||
- text: The <code>#box-1</code> element should have the <code>flex-shrink</code> property set to a value of 1.
|
||||
testString: assert($('#box-1').css('flex-shrink') == '1');
|
||||
- text: The <code>#box-2</code> element should have the <code>flex-shrink</code> property set to a value of 2.
|
||||
testString: assert($('#box-2').css('flex-shrink') == '2');
|
||||
|
||||
```
|
||||
|
||||
@@ -61,14 +66,36 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
flex-shrink: 2;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: Use the flex-wrap Property to Wrap a Row or Column
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cQv9ZtG
|
||||
forumTopicId: 301114
|
||||
localeTitle: Используйте свойство flex-wrap для обертывания строки или столбца
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> CSS flexbox имеет функцию разделения гибкого элемента на несколько строк (или столбцов). По умолчанию контейнер flex будет соответствовать всем гибким элементам вместе. Например, строка будет находиться в одной строке. Однако, используя свойство <code>flex-wrap</code> , он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса: <ul><li> <code>nowrap</code> : это значение по умолчанию и не переносит элементы. </li><li> <code>wrap</code> : обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце. </li><li> <code>wrap-reverse</code> : обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце. </li></ul></section>
|
||||
<section id='description'>
|
||||
CSS flexbox имеет функцию разделения гибкого элемента на несколько строк (или столбцов). По умолчанию контейнер flex будет соответствовать всем гибким элементам вместе. Например, строка будет находиться в одной строке. Однако, используя свойство <code>flex-wrap</code> , он сообщает CSS об обертке элементов. Это означает, что дополнительные элементы перемещаются в новую строку или столбец. Точка прерывания, в которой происходит обертка, зависит от размера элементов и размера контейнера. CSS также имеет опции для направления переноса: <ul><li> <code>nowrap</code> : это значение по умолчанию и не переносит элементы. </li><li> <code>wrap</code> : обертывает элементы слева направо, если они находятся в строке или сверху вниз, если они находятся в столбце. </li><li> <code>wrap-reverse</code> : обертывает элементы снизу вверх, если они находятся в строке или справа налево, если они находятся в столбце. </li></ul>
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> В текущем макете слишком много ящиков для одной строки. Добавьте свойство <code>flex-wrap</code> в элемент <code>#box-container</code> и придайте ему значение wrap. </section>
|
||||
<section id='instructions'>
|
||||
В текущем макете слишком много ящиков для одной строки. Добавьте свойство <code>flex-wrap</code> в элемент <code>#box-container</code> и придайте ему значение wrap.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-container</code> должен иметь свойство <code>flex-wrap</code> установленное на значение wrap.'
|
||||
testString: 'assert($("#box-container").css("flex-wrap") == "wrap", "The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.");'
|
||||
- text: The <code>#box-container</code> element should have the <code>flex-wrap</code> property set to a value of wrap.
|
||||
testString: assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
|
||||
```
|
||||
|
||||
@@ -83,14 +88,60 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-3 {
|
||||
background-color: violet;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-4 {
|
||||
background-color: yellow;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-5 {
|
||||
background-color: green;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
#box-6 {
|
||||
background-color: black;
|
||||
width: 25%;
|
||||
height: 50%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
<div id="box-3"></div>
|
||||
<div id="box-4"></div>
|
||||
<div id="box-5"></div>
|
||||
<div id="box-6"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,23 +2,28 @@
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: Use the justify-content Property in the Tweet Embed
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/c43GgTa
|
||||
forumTopicId: 301115
|
||||
localeTitle: Используйте свойство justify-content в Tweet Embed
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Последняя задача показала пример свойства <code>justify-content</code> . Для вставки tweet это свойство может применяться для выравнивания элементов в элементе <code>.profile-name</code> . </section>
|
||||
<section id='description'>
|
||||
Последняя задача показала пример свойства <code>justify-content</code> . Для вставки tweet это свойство может применяться для выравнивания элементов в элементе <code>.profile-name</code> .
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте свойство <code>justify-content</code> CSS в элемент заголовка <code>.profile-name</code> и установите значение для любого из параметров из последнего вызова. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте свойство <code>justify-content</code> CSS в элемент заголовка <code>.profile-name</code> и установите значение для любого из параметров из последнего вызова.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>.profile-name</code> должен иметь свойство <code>justify-content</code> установленное для любого из этих значений: center, flex-start, flex-end, space-between или space-around.'
|
||||
testString: 'assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g), "The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.");'
|
||||
- text: 'The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: <code>center</code>, <code>flex-start</code>, <code>flex-end</code>, <code>space-between</code>, or <code>space-around</code>.'
|
||||
testString: assert(code.match(/header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around)\s*;/g));
|
||||
|
||||
```
|
||||
|
||||
@@ -124,14 +129,101 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header, footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
display: flex;
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer .stats {
|
||||
display: flex;
|
||||
font-size: 15px;
|
||||
}
|
||||
footer .stats strong {
|
||||
font-size: 18px;
|
||||
}
|
||||
footer .stats .likes {
|
||||
margin-left: 10px;
|
||||
}
|
||||
footer .cta {
|
||||
margin-left: auto;
|
||||
}
|
||||
footer .cta button {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<header>
|
||||
<img src="https://pbs.twimg.com/profile_images/378800000147359764/54dc9a5c34e912f34db8662d53d16a39_400x400.png" alt="Quincy Larson's profile picture" class="profile-thumbnail">
|
||||
<div class="profile-name">
|
||||
<h3>Quincy Larson</h3>
|
||||
<h4>@ossia</h4>
|
||||
</div>
|
||||
<div class="follow-btn">
|
||||
<button>Follow</button>
|
||||
</div>
|
||||
</header>
|
||||
<div id="inner">
|
||||
<p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
|
||||
<span class="date">1:32 PM - 12 Jan 2018</span>
|
||||
<hr>
|
||||
</div>
|
||||
<footer>
|
||||
<div class="stats">
|
||||
<div class="Retweets">
|
||||
<strong>107</strong> Retweets
|
||||
</div>
|
||||
<div class="likes">
|
||||
<strong>431</strong> Likes
|
||||
</div>
|
||||
</div>
|
||||
<div class="cta">
|
||||
<button class="share-btn">Share</button>
|
||||
<button class="retweet-btn">Retweet</button>
|
||||
<button class="like-btn">Like</button>
|
||||
</div>
|
||||
</footer>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
@@ -2,25 +2,30 @@
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: Use the order Property to Rearrange Items
|
||||
challengeType: 0
|
||||
videoUrl: ''
|
||||
videoUrl: https://scrimba.com/p/pVaDAv/cMbvNAG
|
||||
forumTopicId: 301116
|
||||
localeTitle: Используйте свойство Order для переупорядочения элементов
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Свойство <code>order</code> используется для указания CSS порядка отображения элементов гибкости в контейнере flex. По умолчанию элементы будут отображаться в том же порядке, что и исходный HTML-код. Свойство принимает числа как значения, а отрицательные числа могут использоваться. </section>
|
||||
<section id='description'>
|
||||
Свойство <code>order</code> используется для указания CSS порядка отображения элементов гибкости в контейнере flex. По умолчанию элементы будут отображаться в том же порядке, что и исходный HTML-код. Свойство принимает числа как значения, а отрицательные числа могут использоваться.
|
||||
</section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Добавьте <code>order</code> свойств CSS в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 2 и дайте <code>#box-2</code> значение 1. </section>
|
||||
<section id='instructions'>
|
||||
Добавьте <code>order</code> свойств CSS в <code>#box-1</code> и <code>#box-2</code> . Дайте <code>#box-1</code> значение 2 и дайте <code>#box-2</code> значение 1.
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: 'Элемент <code>#box-1</code> должен иметь свойство <code>order</code> равное 2.'
|
||||
testString: 'assert($("#box-1").css("order") == "2", "The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.");'
|
||||
- text: 'Элемент <code>#box-2</code> должен иметь свойство <code>order</code> равное 1.'
|
||||
testString: 'assert($("#box-2").css("order") == "1", "The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.");'
|
||||
- text: The <code>#box-1</code> element should have the <code>order</code> property set to a value of 2.
|
||||
testString: assert($('#box-1').css('order') == '2');
|
||||
- text: The <code>#box-2</code> element should have the <code>order</code> property set to a value of 1.
|
||||
testString: assert($('#box-2').css('order') == '1');
|
||||
|
||||
```
|
||||
|
||||
@@ -61,14 +66,36 @@ tests:
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
order: 2;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
order: 1;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user