JS властивість CSSStyleDeclaration.alignSelf

Загальний опис

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 також можна використовувати у контейнерах з макетом на основі грідів, де вона вирівнює елемент вздовж рядка сітки. Ця властивість є потужним інструментом для створення гнучких та адаптивних макетів, дозволяючи точно контролювати вирівнювання окремих елементів.

правити

Порада

Пам'ятайте, що alignSelf: 'auto' є значенням за замовчуванням, яке використовує вирівнювання, задане властивістю alignItems батьківського контейнера. Тому, якщо ви не бачите змін після встановлення alignSelf, перевірте значення alignItems для контейнера.

автор: Bond правити

Порада

Не плутайте alignSelf з justifyContent або justifySelf. alignSelf вирівнює елементи вздовж перпендикулярної осі контейнера, тоді як justifyContent і justifySelf вирівнюють елементи вздовж головної осі. Використовуйте їх разом для повного контролю над вирівнюванням елементів у макеті.

автор: Bond правити

Порада

Для вирівнювання елементів вздовж базової лінії тексту всередині них, використовуйте alignSelf: 'baseline'. Це особливо корисно для вирівнювання рядків тексту різної висоти або елементів, що містять текст і зображення.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.alignSelf

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

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);

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);