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

правити

Порада

При створенні адаптивного дизайну, використовуйте justifyContent для динамічного розташування елементів. Наприклад, можна змінювати вирівнювання елементів залежно від розміру екрану:

if (window.innerWidth < 600) {
  container.style.justifyContent = 'center';
} else {
  container.style.justifyContent = 'flex-start';
}

Це забезпечить оптимальне розташування елементів на різних пристроях.

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

Порада

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

container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(3, 1fr)';
container.style.justifyContent = 'space-around';

Це дозволить рівномірно розташовувати колонки всередині контейнера.

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

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

Синтаксис

element.style.justifyContent

Переглядачі

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

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

Переглядач
	1	1	3	8	12

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

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

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

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

Приклади

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

<div id="container">Демонстраційний елемент</div>

// Отримуємо контейнер за його 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();

<div id="container">Демонстраційний елемент</div>

// Отримуємо контейнер за його 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();