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

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

element.style.alignItems — це властивість CSS, яка використовується для вирівнювання елементів уздовж поперечної осі (вертикально в контейнері з display: flex або display: grid). У JavaScript ця властивість дозволяє динамічно змінювати вирівнювання дочірніх елементів всередині контейнера без необхідності редагувати CSS-файл.

Властивість alignItems встановлює вирівнювання для всіх дочірніх елементів контейнера. Вона визначає, як елементи будуть розташовані вздовж поперечної осі контейнера. Застосовується виключно до контейнерів з display: flex або display: grid. Можливі значення властивості включають:

• "stretch" — значення за замовчуванням, розтягує елементи на всю висоту контейнера.
• "flex-start" — вирівнює елементи на початку контейнера.
• "flex-end" — вирівнює елементи в кінці контейнера.
• "center" — вирівнює елементи по центру контейнера.
• "baseline" — вирівнює елементи по базовій лінії їх вмісту.

Використання в JavaScript

Щоб використовувати element.style.alignItems в JavaScript, потрібно спочатку вибрати контейнер, до якого застосовується display: flex або display: grid. Потім, за допомогою властивості style, можна встановити значення alignItems.

Приклад коду, який показує як змінити вирівнювання елементів у контейнері:

// Припустимо, що ми маємо контейнер з id "container"
let container = document.getElementById('container');

// Вирівнюємо всі елементи по центру
container.style.alignItems = 'center';

У цьому прикладі всі дочірні елементи контейнера будуть вирівняні по центру вертикально.

Інший приклад, який демонструє зміну вирівнювання на "flex-end":

// Вирівнюємо всі елементи по нижньому краю контейнера
container.style.alignItems = 'flex-end';

Якщо потрібно скинути вирівнювання до початкового стану (розтягнення на всю висоту), використовуємо:

// Встановлюємо вирівнювання в режим розтягування
container.style.alignItems = 'stretch';

Ця властивість особливо корисна, коли ви хочете динамічно змінювати вигляд сторінки залежно від дій користувача або умов.

Таким чином, element.style.alignItems є зручним способом керування вирівнюванням елементів безпосередньо через JavaScript, дозволяючи створювати більш інтерактивні та гнучкі інтерфейси користувача.

правити

Порада

Важливо зазначити, що властивість alignItems діє тільки для елементів, які є дочірніми елементами контейнера з display: flex або display: grid. Якщо спробувати застосувати її до інших елементів, це не матиме жодного ефекту. Тому перед використанням переконайтеся, що ваш контейнер має правильне значення display.

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

Порада

Перш ніж приступити до використання CSSStyleDeclaration, ретельно освоїть основи CSS. Розуміння як працюють стилі допоможе вам краще користуватися цією властивістю при зміні стилів елементів у JavaScript.

// Приклад зміни кольору тексту за допомогою CSSStyleDeclaration
const element = document.getElementById('exampleElement');
element.style.color = 'red';

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

Порада

Щоб отримати актуальні стилі елемента, використовуйте метод getComputedStyle(). Це дозволить вам отримати об'єкт CSSStyleDeclaration, який містить всі обчислені стилі для вказаного елемента.

// Приклад використання getComputedStyle()
const element = document.getElementById('exampleElement');
const computedStyles = window.getComputedStyle(element);
console.log(computedStyles.alignItems);

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

Порада

DOM: Хоча ви можете безпосередньо встановлювати стилі елементів за допомогою CSSStyleDeclaration, краще уникати цього підходу у складних додатках. Замість цього, використовуйте класи CSS або динамічно додавайте або видаляйте класи для керування стилями.

// Поганий підхід
element.style.alignItems = 'stretch';

// Кращий підхід
element.classList.add('stretch-text');

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

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

Синтаксис

element.style.alignItems

Переглядачі

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

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

Переглядач
	29	20	9	16	12	11

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

Переглядач
	4.4	29	20	9

Приклади

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

<script>
const container = document.querySelector('.container');

window.addEventListener('resize', () => {
  if (window.innerWidth < 600) {
    container.style.alignItems = 'flex-start';
  } else {
    container.style.alignItems = 'stretch';
  }
});
</script>

<div class="container">
  <div class="item">Елемент 1</div>
  <div class="item">Елемент 2</div>
  <div class="item">Елемент 3</div>
</div>