style.alignSelf — вирівнювання одного flex-елемента
Загальний опис
alignSelf є властивістю об'єкта, що визначає вирівнювання елемента всередині контейнера з макетом flexbox або grid у веб-застосунках на JavaScript. Вона дозволяє перевизначити вирівнювання окремого елемента відносно властивості alignItems батьківського контейнера.
Основне призначення alignSelf - надати гнучкість у вирівнюванні елементів всередині контейнера, дозволяючи окремим елементам мати інше вирівнювання, ніж решта. Це корисно у випадках, коли потрібно виділити або спеціально позиціонувати певний елемент у макеті.
Властивість alignSelf приймає такі значення:
'auto'(за замовчуванням) - використовується вирівнювання, заданеalignItemsбатьківського контейнера.'flex-start'- вирівнює елемент на початку перпендикулярної осі контейнера.'flex-end'- вирівнює елемент в кінці перпендикулярної осі контейнера.'center'- центрує елемент вздовж перпендикулярної осі контейнера.'baseline'- вирівнює елемент по базовій лінії тексту всередині нього.'stretch'- розтягує елемент, щоб заповнити весь простір вздовж перпендикулярної осі контейнера.
Наприклад, у веб-застосунку з горизонтальним flexbox-контейнером можна використати alignSelf, щоб вирівняти окремий елемент вертикально:
const container = document.createElement('div');
container.style.display = 'flex';
const item1 = document.createElement('div');
item1.textContent = 'Елемент 1';
item1.style.alignSelf = 'flex-start';
const item2 = document.createElement('div');
item2.textContent = 'Елемент 2';
item2.style.alignSelf = 'center';
const item3 = document.createElement('div');
item3.textContent = 'Елемент 3';
item3.style.alignSelf = 'flex-end';
container.appendChild(item1);
container.appendChild(item2);
container.appendChild(item3);
document.body.appendChild(container);
У цьому прикладі перший елемент вирівняний вгорі контейнера, другий - по центру, а третій - внизу, завдяки використанню alignSelf.
alignSelf також можна використовувати у контейнерах з макетом на основі грідів, де вона вирівнює елемент вздовж рядка сітки. Ця властивість є потужним інструментом для створення гнучких та адаптивних макетів, дозволяючи точно контролювати вирівнювання окремих елементів.
- Порада
-
Пам'ятайте, що
автор: BondalignSelf: 'auto'є значенням за замовчуванням, яке використовує вирівнювання, задане властивістюalignItemsбатьківського контейнера. Тому, якщо ви не бачите змін після встановленняalignSelf, перевірте значенняalignItemsдля контейнера. - Порада
-
Не плутайте
автор: BondalignSelfзjustifyContentабоjustifySelf.alignSelfвирівнює елементи вздовж перпендикулярної осі контейнера, тоді якjustifyContentіjustifySelfвирівнюють елементи вздовж головної осі. Використовуйте їх разом для повного контролю над вирівнюванням елементів у макеті. - Порада
-
Для вирівнювання елементів вздовж базової лінії тексту всередині них, використовуйте
автор: BondalignSelf: 'baseline'. Це особливо корисно для вирівнювання рядків тексту різної висоти або елементів, що містять текст і зображення.
Синтаксис
element.style.alignSelfПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 29 | 20 | 9 | 12.1 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 29 | 20 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі ми маємо контейнер з трьома елементами всередині, які вирівняні за допомогою flexbox. Користувач може вибрати значення властивості alignSelf для елементів, використовуючи радіокнопки. Коли користувач вибирає нове значення, JavaScript-код застосовує це значення до всіх елементів, змінюючи їх вирівнювання вздовж перпендикулярної осі контей
HTML
<header>
<h2 class="title">alignSelf</h2>
<p class="description">Вирівнює елемент вздовж перпендикулярної осі контейнера з макетом flexbox або grid.</p>
</header>
<main>
<div class="result">
<div class="container">
<div class="item">Елемент 1</div>
<div class="item">Елемент 2</div>
<div class="item">Елемент 3</div>
</div>
<div class="controls">
<label>
<input type="radio" name="alignment" value="auto" checked> auto
</label>
<label>
<input type="radio" name="alignment" value="flex-start"> flex-start
</label>
<label>
<input type="radio" name="alignment" value="flex-end"> flex-end
</label>
<label>
<input type="radio" name="alignment" value="center"> center
</label>
<label>
<input type="radio" name="alignment" value="stretch"> stretch
</label>
<label>
<input type="radio" name="alignment" value="baseline"> baseline
</label>
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.container {
display: flex;
height: 200px;
align-items: flex-start;
}
.item {
background-color: lightgray;
padding: 10px;
margin: 5px;
}JS
const container = document.querySelector('.container');
const items = document.querySelectorAll('.item');
const alignmentRadios = document.querySelectorAll('input[name="alignment"]');
alignmentRadios.forEach(radio => {
radio.addEventListener('change', () => {
const alignment = radio.value;
items.forEach(item => {
item.style.alignSelf = alignment;
});
});
});
//# sourceURL=pen.jsУ цьому прикладі ми використовуємо alignSelf для вирівнювання окремого елемента всередині горизонтального flexbox-контейнера. Властивість alignSelf дозволяє перевизначити вирівнювання, задане властивістю alignItems для контейнера.
const container = document.createElement('div');
container.style.display = 'flex';
container.style.alignItems = 'flex-start'; // Вирівнювання за замовчуванням
const item1 = document.createElement('div');
item1.textContent = 'Елемент 1';
item1.style.backgroundColor = 'lightgray';
item1.style.padding = '10px';
const item2 = document.createElement('div');
item2.textContent = 'Елемент 2';
item2.style.backgroundColor = 'lightgray';
item2.style.padding = '10px';
item2.style.alignSelf = 'center'; // Перевизначає вирівнювання для цього елемента
container.appendChild(item1);
container.appendChild(item2);
document.body.appendChild(container);У цьому складнішому прикладі ми використовуємо alignSelf для вирівнювання елементів у grid-контейнері. Властивість alignSelf дозволяє вирівнювати елементи вздовж рядка сітки, а не вздовж головної осі, як justifySelf.
const gridContainer = document.createElement('div');
gridContainer.style.display = 'grid';
gridContainer.style.gridTemplateColumns = 'repeat(3, 1fr)';
gridContainer.style.gridGap = '10px';
gridContainer.style.height = '200px';
const item1 = document.createElement('div');
item1.textContent = 'Елемент 1';
item1.style.backgroundColor = 'lightgray';
item1.style.padding = '10px';
item1.style.alignSelf = 'start'; // Вирівнювання на початку рядка сітки
const item2 = document.createElement('div');
item2.textContent = 'Елемент 2';
item2.style.backgroundColor = 'lightgray';
item2.style.padding = '10px';
item2.style.alignSelf = 'center'; // Центрування вздовж рядка сітки
const item3 = document.createElement('div');
item3.textContent = 'Елемент 3';
item3.style.backgroundColor = 'lightgray';
item3.style.padding = '10px';
item3.style.alignSelf = 'end'; // Вирівнювання в кінці рядка сітки
gridContainer.appendChild(item1);
gridContainer.appendChild(item2);
gridContainer.appendChild(item3);
document.body.appendChild(gridContainer);Коментарі
Коментарів ще немає — будьте першим!