chore(i18n,curriculum): processed translations - new ukrainian (#44447)
This commit is contained in:
camperbot
GitHub
@@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af1
|
||||
title: Додавання різноманітних властивостей flex до вбудованих твітів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
|
||||
forumTopicId: 301100
|
||||
dashedName: add-flex-superpowers-to-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Справа вбудований твіт, що використовуватиметься як практичний приклад. Деякі елементи виглядатимуть краще у іншому розташуванні. Останнє завдання показало `display: flex`. Тепер ви можете додати його до кількох компонентів вбудованого твіта, щоб почати їх розташування.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `display: flex` до всіх наступних елементів - майте на увазі, що селектори вже встановлені до CSS:
|
||||
|
||||
`header`, the header's `.profile-name`, the header's `.follow-btn`, the header's `h3` та `h4`, the `footer`, та the footer's `.stats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `.follow-btn` має відображатися на цій сторінці. Переконайтеся, що всі розширення вимкнено, наприклад блокувальники реклами.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Ваш `header` повинен мати встановлені налаштування `display` на `flex`.
|
||||
|
||||
```js
|
||||
assert($('header').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Ваш `footer` повинен мати встановлені налаштування `display` на `flex`.
|
||||
|
||||
```js
|
||||
assert($('footer').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Ваш `h3` повинен мати встановлені налаштування `display` на `flex`.
|
||||
|
||||
```js
|
||||
assert($('h3').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Ваш `h4` повинен мати встановлені налаштування `display` на `flex`.
|
||||
|
||||
```js
|
||||
assert($('h4').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Ваш `.profile-name` повинен мати встановлені налаштування `display` на `flex`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Ваш `.follow-btn` повинен мати встановлені налаштування `display` на `flex`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('display') == 'flex');
|
||||
```
|
||||
|
||||
Ваш `.stats` повинен мати встановлені налаштування `display` на `flex`.
|
||||
|
||||
```js
|
||||
assert($('.stats').css('display') == 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
header {
|
||||
|
||||
}
|
||||
header .profile-thumbnail {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
header .profile-name {
|
||||
|
||||
margin-left: 10px;
|
||||
}
|
||||
header .follow-btn {
|
||||
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
header .follow-btn button {
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
}
|
||||
header h3, header h4 {
|
||||
|
||||
margin: 0;
|
||||
}
|
||||
#inner p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 20px;
|
||||
}
|
||||
#inner hr {
|
||||
margin: 20px 0;
|
||||
border-style: solid;
|
||||
opacity: 0.1;
|
||||
}
|
||||
footer {
|
||||
|
||||
}
|
||||
footer .stats {
|
||||
|
||||
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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af8
|
||||
title: Вирівнювання елементів за допомогою властивості align-items
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
|
||||
forumTopicId: 301101
|
||||
dashedName: align-elements-using-the-align-items-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Властивість `align-items` подібна до `justify-content`. Нагадуємо, що властивість `justify-content` вирівнює flex елементи вздовж головної вісі. Головною віссю для рядків вважається горизонтальна лінія, а для стовпців — вертикальна.
|
||||
|
||||
Flex контейнери також мають **cross axis**, яка є перпендикулярною головній осі. Для рядків ця поперечна вісь — вертикальна, а для стовпців — горизонтальна.
|
||||
|
||||
CSS пропонує властивість `align-items` для вирівнювання flex елементів за поперечною віссю. Для рядка, вона вказує CSS, як переміщати елементи в одному рядку вгору чи вниз контейнера. А у стовпці — як вирівнювати елементи, зліва чи справа контейнера.
|
||||
|
||||
Список доступних значень для `align-items`:
|
||||
|
||||
<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 контейнер. Це значення використовується за замовчуванням, якщо не вказано значення <code>align-items</code>.</li><li><code>baseline</code>: вирівнювання елементів по їх базовій лінії. Базова лінія — це текстове поняття, що позначає лінію, на якій розташовуються всі літери.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Приклад допоможе показати цю властивість у дії. Додайте властивість CSS `align-items` до елемента `#box-container` та надайте йому значення `center`.
|
||||
|
||||
**Бонус**
|
||||
Спробуйте інші варіанти властивості `align-items` у редакторі коду, щоб побачити їхні відмінності. Проте зверніть увагу, що лише значення `center` може виконати це завдання.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-container` повинен мати налаштовану властивість `align-items` до значення `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af6
|
||||
title: Вирівнювання елементів за допомогою властивості justify-content
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
|
||||
forumTopicId: 301102
|
||||
dashedName: align-elements-using-the-justify-content-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Деколи flex елементи не заповнюють все вільне місце у flex контейнері. Зазвичай, можна вказати CSS, як саме варто вирівняти та розтягнути flex елементи. На щастя, властивість `justify-content` має декілька варіантів для цього. По-перше, перед тим як їх розглядати, варто вивчити важливу термінологію.
|
||||
|
||||
[Це зображення рядка ілюструє подальші поняття та може стати у пригоді.](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg)
|
||||
|
||||
Пам'ятайте, що якщо ви налаштуєте flex контейнер у вигляді рядка, flex елементи послідовно розташовуватимуться зліва направо. Встановлення flex контейнера у вигляді стовпця розташує flex елементи вертикально зверху вниз. Для обох цих налаштувань, напрямок, у якому розташовуються flex елементи, має назву **main axis**. У рядку це — горизонтальна лінія, що перетинає кожен елемент. А у стовпці головна вісь — це вертикальна лінія, що проходить через всі елементи.
|
||||
|
||||
Існує декілька способів розміщення flex елементів уздовж лінії, тобто головної осі. Найпоширеніший — це `justify-content: center;`, що вирівнює всі flex елементи по центру всередині flex контейнера. Інші варіанти:
|
||||
|
||||
<ul><li><code>flex-start</code>: розміщення елементів від початку flex контейнера. Елементи у рядку посуваються до лівого боку контейнера. А у стовпці елементи вирівнюються зверху контейнера. Це вирівнювання використовується за замовчуванням, якщо не вказано <code>justify-content</code>.</li><li><code>flex-end</code>: вирівнювання елементів від кінця flex контейнера. У рядку елементи переміщуються до правого боку контейнера. А у стовпці — до нижньої частини контейнера.</li><li><code>space-between</code>: вирівнювання елементів по центру головної осі, залишаючи додатковий простір між елементами. Перший та останній елементи відштовхуються на самий край flex контейнера. Наприклад, у рядку перший елемент стає з лівого боку контейнера, останній — з правого боку, а інші елементи рівномірно розподіляються серед місця, що залишилося між ними.</li><li><code>space-around</code>: подібне значення до <code>space-between</code>, але перший та останній елементи не фіксуються навпроти країв контейнера, а вільне місце розподіляється поміж всіх елементів, залишаючи половину простору з будь-якого краю flex контейнера.</li><li><code>space-evenly</code>: рівномірно розподіляє вільне місце між flex елементами з цілим пробілом з будь-якого краю flex контейнера</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
Приклад допоможе показати цю властивість у дії. Додайте властивість CSS `justify-content` до елемента `#box-container`та надайте йому значення `center`.
|
||||
|
||||
**Бонус**
|
||||
Спробуйте інші варіанти властивості `justify-content` у редакторі коду, щоб побачити їхні відмінності. Проте майте на увазі, що лише значення `center` може виконати це завдання.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-container` повинен мати налаштовану властивість `justify-content` до значення `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('justify-content') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,218 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af5
|
||||
title: Застосування властивості flex-direction для створення стовпця у вбудованому твіті
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
|
||||
forumTopicId: 301103
|
||||
dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Раніше для вбудованих твітів `header` та `footer` використовувалася властивість `flex-direction` зі значенням рядка. Так само і елементи всередині `.profile-name` функціонували добре у вигляді стовпця.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `flex-direction` до елементу заголовка `.profile-name` та встановіть значення `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `.follow-btn` має відображатися на цій сторінці. Переконайтеся, що всі розширення вимкнено, наприклад блокувальники реклами.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Елемент `.profile-name` повинен мати властивість `flex-direction`, встановлену як `column`.
|
||||
|
||||
```js
|
||||
assert($('.profile-name').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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;
|
||||
|
||||
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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@@ -0,0 +1,230 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af3
|
||||
title: Застосування властивості flex-direction для створення рядків у вбудованому твіті
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
|
||||
forumTopicId: 301104
|
||||
dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
У прикладі вбудованого твіту `header` та `footer` мають дочірні елементи, які можна впорядковувати у ряди за допомогою властивості `flex-direction`. Вона вказує CSS вирівнювати дочірні елементи горизонтально.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `flex-direction` до `header` і `footer` та налаштуйте значення на `row`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `.follow-btn` має відображатися на цій сторінці. Переконайтеся, що всі розширення вимкнено, наприклад блокувальники реклами.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
`header` повинен мати встановлене налаштування властивості `flex-direction` на `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
`footer` повинен мати встановлене налаштування властивості `flex-direction` на `row`.
|
||||
|
||||
```js
|
||||
assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af0
|
||||
title: 'Використання display: flex для розміщення двох боксів'
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
|
||||
forumTopicId: 301105
|
||||
dashedName: use-display-flex-to-position-two-boxes
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Цей розділ застосовує альтернативні стилі виконання завдання, щоб показати, як використовувати CSS для розміщення елементів гнучким способом. Спочатку в завданні пояснюється теорія, а потім у практичному завданні за допомогою простого компонента твіту застосовується концепція flexbox.
|
||||
|
||||
Розміщення властивості CSS `display: flex;` в елементі дозволяє використовувати інші flex властивості для створення адаптивної сторінки.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `display` до `#box-container` та встановіть значення `flex`.
|
||||
|
||||
# --hints--
|
||||
|
||||
`#box-container` повинен мати налаштовану властивість `display` до значення `flex`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('display') == 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
|
||||
#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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512af9
|
||||
title: Використання властивості align-items у вбудованому твіті
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
|
||||
forumTopicId: 301106
|
||||
dashedName: use-the-align-items-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В останньому завданні ви побачили властивість `align-items` та її приклад. Цю властивість можна застосувати до декількох вбудованих елементів у твіті щоб вирівняти flex елементи всередині них.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `align-items` до елемента заголовку `.follow-btn`. Установіть значення `center`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `.follow-btn` має відображатися на сторінці. Переконайтеся, що всі розширення вимкнено, наприклад блокувальники реклами.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Елемент `.follow-btn` повинен мати налаштовану властивість `align-items` до значення `center`.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').css('align-items') == 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d78af367417b2b2512b00
|
||||
title: Використання властивості align-self
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
|
||||
forumTopicId: 301107
|
||||
dashedName: use-the-align-self-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Остання властивість flex елементів — це `align-self`. Ця властивість дозволяє вам налаштовувати кожне вирівнювання елемента окремо, а не робити це для всіх одночасно. Вона корисна, оскільки інші поширені техніки коригування, що використовуються у властивостях CSS `float`, `clear`, і `vertical-align`, не працюють із flex елементами.
|
||||
|
||||
`align-self` набуває того ж значення, що і `align-items`, та може замінити будь-яке значення, встановлене властивістю `align-items`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `align-self` до `#box-1` та `#box-2`. Надайте `#box-1` значення `center`, а `#box-2` значення `flex-end`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-1` повинен мати властивість `align-self`, налаштовану до значення `center`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('align-self') == 'center');
|
||||
```
|
||||
|
||||
Елемент `#box-2` повинен мати властивість `align-self`, налаштовану до значення `flex-end`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('align-self') == 'flex-end');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afd
|
||||
title: Використання властивості flex-basis для встановлення початкового розміру елемента
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
|
||||
forumTopicId: 301108
|
||||
dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Властивість `flex-basis` вказує початковий розмір елемента до того, як CSS корегує `flex-shrink` чи `flex-grow`.
|
||||
|
||||
Одиниці виміру, що використовуються властивістю `flex-basis`, дорівнюють розмірам інших властивостей (`px`, `em`, `%` тощо). Значення `auto` змінює розмір елементів на основі їхнього вмісту.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Налаштуйте початковий розмір боксів за допомогою `flex-basis`. Додайте властивість CSS `flex-basis` до `#box-1` та `#box-2`. Надайте `#box-1` значення `10em`, а `#box-2` значення `20em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-1` повинен мати властивість `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
Елемент `#box-1` повинен мати властивість `flex-basis`, налаштовану до значення `10em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
|
||||
```
|
||||
|
||||
Елемент `#box-2` повинен мати властивість `flex-basis`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-basis') != 'auto');
|
||||
```
|
||||
|
||||
Елемент `#box-2` повинен мати властивість `flex-basis`, налаштовану до значення `20em`.
|
||||
|
||||
```js
|
||||
assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af4
|
||||
title: Використання властивості flex-direction для створення стовпця
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
|
||||
forumTopicId: 301109
|
||||
dashedName: use-the-flex-direction-property-to-make-a-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
В останніх двох завданнях використовувалася властивість `flex-direction`, встановлена як `row`. Також ця властивість може створювати стовпець, вертикально розташовуючи дочірні елементи flex контейнера.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `flex-direction` до елемента `#box-container` та надайте йому значення `column`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-container` повинен мати властивість `flex-direction`, встановлену як `column`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'column');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 587d78ab367417b2b2512af2
|
||||
title: Використовуйте параметр flex-direction, щоб створити рядок
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
|
||||
forumTopicId: 301110
|
||||
dashedName: use-the-flex-direction-property-to-make-a-row
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Додавання `display: flex` до елементу перетворює його в flex-контейнер. Це робить можливим вирівнювання будь-яких дочірніх елементів у рядки або стовпці. Це можна зробити, додавши властивість `flex-direction` до батьківського елемента та встановивши його для рядка чи стовпця. Створення рядка вирівнює дочірні елементи горизонтально, а створення стовпця вирівнює їх вертикально.
|
||||
|
||||
Іншими параметрами для `flex-direction` є `row-reverse` та`column-reverse`.
|
||||
|
||||
**Note:** Значення за замовчуванням для `flex-direction` властивість `row`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `flex-direction` в елемент `#box-container` та надайте йому значення `row-reverse`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-container` повинен мати властивість `flex-direction` встановлену для `row-reverse`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-direction') == 'row-reverse');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
|
||||
}
|
||||
#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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afc
|
||||
title: Використовуйте flex-grow властивість для розширення об'єктів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
|
||||
forumTopicId: 301111
|
||||
dashedName: use-the-flex-grow-property-to-expand-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Протилежною до властивості `flex-shrink` є `flex-grow` властивість. Згадайте, що `flex-shrink` контролює розмір об'єктів, коли контейнер стискується. Властивість `flex-grow` контролює розмір об'єктів, коли контейнер вихідних елементів збільшується.
|
||||
|
||||
Наприклад, якщо один об'єкт матиме значення `flex-grow` від `1`, а інший матиме значення `flex-grow` від `3`, то одне зі значень від `3` стиснеться втричі більше ніж інше.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте CSS властивість `flex-grow` до обох `#box-1` та `#box-2`. Надайте для `#box-1` значення `1`, і для `#box-2` значення `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-1` повинен мати властивість `flex-grow` налаштованою до значення `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-grow') == '1');
|
||||
```
|
||||
|
||||
Елемент `#box-2` повинен мати властивість `flex-grow` налаштованою до значення `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-grow') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512afe
|
||||
title: Використовуйте властивість гнучких скорочень
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
|
||||
forumTopicId: 301112
|
||||
dashedName: use-the-flex-shorthand-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Існує ярлик, що дозволяє одночасно встановити декілька гнучких властивостей. Властивості `flex-grow`, `flex-shrink`, та `flex-basis` можуть бути встановлені разом за допомогою властивості `flex` property.
|
||||
|
||||
Для прикладу, `flex: 1 0 10px;` встановить позицію `flex-grow: 1;`, `flex-shrink: 0;`, та `flex-basis: 10px;`.
|
||||
|
||||
Параметри властивостей за замовчуванням `flex: 0 1 auto;`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `flex` до `#box-1` та`#box-2`. Вкажіть значення `#box-1` так, що його `flex-grow` складає `2`, його `flex-shrink` це `2`, і його `flex-basis` це`150px`. Вкажіть значення `#box-2` так, що його `flex-grow` становить `1`, його `flex-shrink` це `1`, та його `flex-basis` це `150px`.
|
||||
|
||||
Ці значення приведуть до того, що `#box-1` збільшиться, щоб заповнити додатковий простір з подвійною швидкістю коду `#box-2`, коли контейнер буде більше ніж 300px і зменшиться з подвійною швидкістю коду `#box-2`, коли контейнер буде менше ніж 300px. 300px - це сукупний розмір `flex-basis` значення двох комірок.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-1` повинен містити властивість `flex` налаштовану до значення `2 2 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-1').css('flex-grow') == '2' &&
|
||||
$('#box-1').css('flex-shrink') == '2' &&
|
||||
$('#box-1').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
Елемент `#box-2` повинен мати властивість `flex`, налаштовану до значення `1 1 150px`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('#box-2').css('flex-grow') == '1' &&
|
||||
$('#box-2').css('flex-shrink') == '1' &&
|
||||
$('#box-2').css('flex-basis') == '150px'
|
||||
);
|
||||
```
|
||||
|
||||
Ваш код має використовувати властивість `flex` для `#box-1` та `#box-2`.
|
||||
|
||||
```js
|
||||
assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afb
|
||||
title: Використовуйте властивість flex-shrink щоб стискати об'єкти
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
|
||||
forumTopicId: 301113
|
||||
dashedName: use-the-flex-shrink-property-to-shrink-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
На даному етапі всі властивості в запитах застосовуються до flex-контейнерів (вихідні елементи flex-об'єктів). Однак є кілька корисних властивостей для flex-елементів.
|
||||
|
||||
Перша - властивість `flex-shrink`. Це дозволяє об'єкту стискатись під час використання, якщо flex-контейнер є замалий. Об'єкти стискаються, коли ширина контейнера вихідних елементів є меншою за об'єднану ширину всіх flex-об'єктів в середині нього.
|
||||
|
||||
Властивість `flex-shrink` вважає числа за значення. Чим більше число, тим більше він буде стискатись в порівнянні з іншими об'єктами в контейнері. Наприклад, якщо один об'єкт матиме значення `flex-shrink` від `1`, а інший матиме значення `flex-shrink` від `3`, то одне зі значень від `3` стиснеться втричі більше ніж інше.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте CSS властивість `flex-shrink` до обох `#box-1` та `#box-2`. Надайте для `#box-1` значення `1` і для `#box-2` значення `2`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-1` повинен мати властивість `flex-shrink` налаштованою до значення `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('flex-shrink') == '1');
|
||||
```
|
||||
|
||||
Елемент `#box-2` повинен мати властивість `flex-shrink` налаштованою до значення `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('flex-shrink') == '2');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,138 @@
|
||||
---
|
||||
id: 587d78ad367417b2b2512afa
|
||||
title: Використовуйте flex-wrap Property для обгортання рядка чи стовпця
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
|
||||
forumTopicId: 301114
|
||||
dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
CSS flexbox має можливість розділяти флекс-елемент на декілька рядків ( або стовпців). За замовчуванням, флекс-контейнер поміщає всі флекс-елементи разом. Приміром, рядок буде на одній лінії.
|
||||
|
||||
Однак, використовуючи `flex-wrap` властивість вказує CSS загорнути предмети. Це означає, що додаткові елементи будуть переміщуватися в новий рядок або стовпчик. Точка зупинки, де знаходиться зациклення, залежить від розміру предметів та розміру контейнера.
|
||||
|
||||
CSS також має варіанти напрямку обгортки:
|
||||
|
||||
<ul><li><code>nowrap</code>: це налаштування за замовчуванням, та не обгортає елементи.</li><li><code>wrap</code>: обгортає елементи в декілька рядів згори донизу, якщо вони знаходяться в рядках, і зліва направо, якщо вони знаходяться в стовпцях.</li><li><code>wrap-reverse</code>: огортає елементи в декілька рядків від нижнього до верхнього, якщо вони знаходяться в рядках, і справа наліво, якщо вони знаходяться в стовпцях.</li></ul>
|
||||
|
||||
# --instructions--
|
||||
|
||||
У поточному макеті занадто багато скриньок для одного рядка. Додайте CSS властивість `flex-wrap` в елемент `#box-container` і надайте йому значення `wrap`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-container` повинен мати властивість `flex-wrap`, налаштовану до значення `wrap`.
|
||||
|
||||
```js
|
||||
assert($('#box-container').css('flex-wrap') == 'wrap');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
background: gray;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
#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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
@@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 587d78ac367417b2b2512af7
|
||||
title: Використовуйте властивість justify-content у вбудованому твіті
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
|
||||
forumTopicId: 301115
|
||||
dashedName: use-the-justify-content-property-in-the-tweet-embed
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Останній запит показав приклад властивості `justify-content`. Ця властивість може застосовуватись для вирівнювання об'єктів у елементі `.profile-name` для додавання коментаря.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте CSS властивість `justify-content` до елемента заголовку `.profile-name` та налаштуйте значення для будь-якого з варіантів останнього запиту.
|
||||
|
||||
# --hints--
|
||||
|
||||
Ваш `.follow-btn` код повинен відображатися на сторінці. Переконайтеся, що такі розширення, як блокувальники реклами, вимкнено.
|
||||
|
||||
```js
|
||||
assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
|
||||
```
|
||||
|
||||
Елемент `.profile-name` повинен мати властивість `justify-content`, щоб налаштувати будь-яке з цих значень: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, чи `space-evenly`.
|
||||
|
||||
```js
|
||||
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|space-evenly)\s*;/g
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" 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>
|
||||
```
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d78ae367417b2b2512aff
|
||||
title: Використовуйте властивість порядку для перестановки елементів
|
||||
challengeType: 0
|
||||
videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
|
||||
forumTopicId: 301116
|
||||
dashedName: use-the-order-property-to-rearrange-items
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Властивість `order` використовують для визначення CSS порядку розташування flex-елементів у flex-контейнері. За замовчуванням елементи будуть з'являтись у тому ж порядку, який вказаний у вихідному HTML-коді. Властивість сприймає цифри як значення; можна також використовувати від'ємні числа.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Додайте властивість CSS `order` до `#box-1` та `#box-2`. Задайте `#box-1` значення `2`, а `#box-2` - значення `1`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Елемент `#box-1` повинен мати властивість `order` налаштовану до значення `2`.
|
||||
|
||||
```js
|
||||
assert($('#box-1').css('order') == '2');
|
||||
```
|
||||
|
||||
Елемент `#box-2` повинен містити властивість `order` налаштовану до значення `1`.
|
||||
|
||||
```js
|
||||
assert($('#box-2').css('order') == '1');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
#box-container {
|
||||
display: flex;
|
||||
height: 500px;
|
||||
}
|
||||
#box-1 {
|
||||
background-color: dodgerblue;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
#box-2 {
|
||||
background-color: orangered;
|
||||
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="box-container">
|
||||
<div id="box-1"></div>
|
||||
<div id="box-2"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```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>
|
||||
```
|
||||
Reference in New Issue
Block a user