96 lines
4.9 KiB
Markdown
96 lines
4.9 KiB
Markdown
---
|
||
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>
|
||
```
|