css.in.ua
Підтримати

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, дозволяючи створювати більш інтерактивні та гнучкі інтерфейси користувача.

Порада:

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

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

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

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

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

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

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

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

Синтаксис

element.style.alignItems

Значення

Return

Переглядачі

Переглядач

1

1

1

12.1

12
Переглядач

4.4

18

4

1
Переглядач

-

-

Приклади


У цьому прикладі ми демонструємо різні значення властивості alignItems для вирівнювання flex-елементів всередині контейнера. Користувач може вибрати потрібне значення alignItems за допомогою радіо-кнопок. Один з елементів має більшу висоту, що дозволяє побачити різницю між значеннями baseline та stretch.

У цьому прикладі ми створюємо адаптивний макет з використанням alignItems: flex-start та alignItems: stretch. Властивість alignItems змінюється динамічно залежно від ширини вікна браузера за допомогою JavaScript. На мобільних пристроях елементи вирівнюються по верхньому краю, а на більших екранах вони розтягуються на всю висоту контейнера.

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

Спільнота

Зв'язок