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

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

element.style.justifyContent - це властивість CSS, яка використовується для визначення вирівнювання вмісту вздовж головної осі контейнера, що має дисплей типу flex або grid. Вона дозволяє керувати розміщенням елементів всередині контейнера, створюючи різні візуальні ефекти і забезпечуючи оптимальну організацію простору.

Властивість justifyContent може приймати декілька значень, кожне з яких визначає специфічне вирівнювання вмісту:

• flex-start: Вміст вирівнюється на початку контейнера.
• flex-end: Вміст вирівнюється в кінці контейнера.
• center: Вміст вирівнюється по центру контейнера.
• space-between: Вміст розподіляється з рівними проміжками між елементами.
• space-around: Вміст розподіляється з рівними проміжками навколо кожного елемента.
• space-evenly: Вміст розподіляється з рівними проміжками між елементами, включаючи крайні елементи і контейнери.

Щоб використати властивість justifyContent в JavaScript, потрібно отримати доступ до HTML-елемента і встановити значення цієї властивості через об'єкт style. Нижче наведено приклад використання element.style.justifyContent.

// Отримуємо контейнер за його ID
let container = document.getElementById('container');

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

У цьому прикладі ми отримали контейнер з ідентифікатором container і встановили для його властивості justifyContent значення center. Це означає, що всі елементи всередині контейнера будуть вирівняні по центру вздовж головної осі.

Ще один приклад використання властивості justifyContent для розподілу елементів з рівними проміжками між ними:

// Отримуємо контейнер за його ID
let container = document.getElementById('container');

// Встановлюємо вирівнювання вмісту з рівними проміжками між елементами
container.style.justifyContent = 'space-between';

У цьому прикладі ми встановили для контейнера значення justifyContent як space-between. Це означає, що елементи всередині контейнера будуть розташовані з рівними проміжками між ними, а перший і останній елементи будуть притиснуті до країв контейнера.

Властивість justifyContent також може бути використана для створення динамічних інтерфейсів, де вирівнювання вмісту змінюється в залежності від дій користувача або інших умов. Наприклад:

// Отримуємо контейнер за його ID
let container = document.getElementById('container');

// Функція для зміни вирівнювання вмісту
function updateJustifyContent(alignment) {
  container.style.justifyContent = alignment;
}

// Викликаємо функцію для встановлення вирівнювання по центру
updateJustifyContent('center');

// Викликаємо функцію для встановлення вирівнювання з рівними проміжками
updateJustifyContent('space-around');

У цьому прикладі ми створили функцію updateJustifyContent, яка змінює вирівнювання вмісту контейнера залежно від переданого параметра. Це дозволяє динамічно керувати розташуванням елементів всередині контейнера, забезпечуючи гнучкість і адаптивність інтерфейсу.

Завдяки властивості justifyContent, розробники можуть легко керувати вирівнюванням елементів у контейнерах з дисплеєм типу flex або grid, створюючи естетично привабливі та функціональні веб-додатки.

Синтаксис

element.style.justifyContent

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

// Отримуємо контейнер за його ID
let container = document.getElementById('container');

// Функція для зміни вирівнювання вмісту залежно від ширини вікна
function adjustJustifyContent() {
  if (window.innerWidth < 600) {
    container.style.justifyContent = 'center';
  } else {
    container.style.justifyContent = 'space-between';
  }
}

// Додаємо обробник події на зміну розміру вікна
window.addEventListener('resize', adjustJustifyContent);

// Викликаємо функцію при завантаженні сторінки
adjustJustifyContent();

// Отримуємо контейнер за його ID
let container = document.getElementById('container');

// Функція для зміни вирівнювання вмісту залежно від кількості елементів
function updateJustifyContentBasedOnItems() {
  let itemCount = container.children.length;

  if (itemCount < 3) {
    container.style.justifyContent = 'space-around';
  } else if (itemCount < 6) {
    container.style.justifyContent = 'center';
  } else {
    container.style.justifyContent = 'space-between';
  }
}

// Викликаємо функцію при завантаженні сторінки
updateJustifyContentBasedOnItems();

// Додаємо новий елемент і оновлюємо вирівнювання
let newItem = document.createElement('div');
newItem.textContent = 'Новий елемент';
container.appendChild(newItem);
updateJustifyContentBasedOnItems();