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: 'baseline'`. Це особливо корисно для вирівнювання рядків тексту різної висоти або елементів, що містять текст і зображення.
Порада:	Не плутайте `alignSelf` з `justifyContent` або `justifySelf`. `alignSelf` вирівнює елементи вздовж перпендикулярної осі контейнера, тоді як `justifyContent` і `justifySelf` вирівнюють елементи вздовж головної осі. Використовуйте їх разом для повного контролю над вирівнюванням елементів у макеті.
Порада:	Пам'ятайте, що `alignSelf: 'auto'` є значенням за замовчуванням, яке використовує вирівнювання, задане властивістю `alignItems` батьківського контейнера. Тому, якщо ви не бачите змін після встановлення `alignSelf`, перевірте значення `alignItems` для контейнера.

Синтаксис

element.style.alignSelf

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі ми маємо контейнер з трьома елементами всередині, які вирівняні за допомогою flexbox. Користувач може вибрати значення властивості alignSelf для елементів, використовуючи радіокнопки. Коли користувач вибирає нове значення, JavaScript-код застосовує це значення до всіх елементів, змінюючи їх вирівнювання вздовж перпендикулярної осі контей


  See the Pen <a href="https://codepen.io/css_in_ua/pen/abrmrLa">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо 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);

JS довідник

JavaScript

Наповнення JS розділу