style.justifyContent — вирівнювання flex з JavaScript
Загальний опис
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Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 29 | 20 | 9 | 12.1 | 12 | 11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 29 | 20 | 9 |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад дозволяє користувачам динамічно змінювати значення justifyContent для flex-контейнера за допомогою кнопок. Користувач може вибрати різні варіанти вирівнювання елементів у контейнері: початкове вирівнювання, центроване вирівнювання, вирівнювання з кінця, а також різні способи розподілу простору між елементами. Це демонструє, як властивість justifyContent впливає на розташування елементів у контейнері flex, що є ключовим аспектом створення адаптивних і гнучких макетів.
HTML
<header>
<h2 class="title">element.style.justifyContent</h2>
<p class="description">Керує розташуванням елементів всередині flex-контейнера вздовж головної осі.</p>
</header>
<main>
<div class="result">
<!-- Кнопки для зміни значення justifyContent -->
<div>
<button id="justifyStart">Justify Start</button>
<button id="justifyCenter">Justify Center</button>
<button id="justifyEnd">Justify End</button>
<button id="justifySpaceBetween">Space Between</button>
<button id="justifySpaceAround">Space Around</button>
<button id="justifySpaceEvenly">Space Evenly</button>
</div>
<!-- Flex-контейнер з елементами для демонстрації -->
<div id="flexContainer" class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.flex-container {
display: flex;
gap: 10px;
width: 100%;
padding: 20px;
background-color: #e0e0e0;
border: 1px solid #ccc;
justify-content: flex-start; /* Початкове значення */
}
.flex-item {
padding: 20px;
background-color: #4CAF50;
color: white;
text-align: center;
}JS
document.addEventListener('DOMContentLoaded', function () {
const flexContainer = document.getElementById('flexContainer');
const justifyStartButton = document.getElementById('justifyStart');
const justifyCenterButton = document.getElementById('justifyCenter');
const justifyEndButton = document.getElementById('justifyEnd');
const justifySpaceBetweenButton = document.getElementById('justifySpaceBetween');
const justifySpaceAroundButton = document.getElementById('justifySpaceAround');
const justifySpaceEvenlyButton = document.getElementById('justifySpaceEvenly');
justifyStartButton.addEventListener('click', function () {
flexContainer.style.justifyContent = 'flex-start';
});
justifyCenterButton.addEventListener('click', function () {
flexContainer.style.justifyContent = 'center';
});
justifyEndButton.addEventListener('click', function () {
flexContainer.style.justifyContent = 'flex-end';
});
justifySpaceBetweenButton.addEventListener('click', function () {
flexContainer.style.justifyContent = 'space-between';
});
justifySpaceAroundButton.addEventListener('click', function () {
flexContainer.style.justifyContent = 'space-around';
});
justifySpaceEvenlyButton.addEventListener('click', function () {
flexContainer.style.justifyContent = 'space-evenly';
});
});
//# sourceURL=pen.jsУ цьому прикладі ми динамічно змінюємо вирівнювання вмісту контейнера залежно від ширини вікна. Якщо ширина вікна менша за 600 пікселів, елементи вирівнюються по центру (center), а якщо більше - з рівними проміжками між ними (space-between). Такий підхід забезпечує адаптивний дизайн, що змінює розташування елементів для оптимальної читабельності та зручності на різних пристроях.
HTML
<div id="container">Демонстраційний елемент</div>JS
// Отримуємо контейнер за його 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();У цьому прикладі ми змінюємо вирівнювання вмісту контейнера залежно від кількості його дочірніх елементів. Якщо елементів менше трьох, використовується вирівнювання space-around, від трьох до шести - center, більше шести - space-between. Це дозволяє динамічно коригувати розташування елементів, забезпечуючи відповідне вирівнювання залежно від кількості елементів, що підвищує гнучкість та зручність користування інтерфейсом.
HTML
<div id="container">Демонстраційний елемент</div>JS
// Отримуємо контейнер за його 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();Коментарі
Коментарів ще немає — будьте першим!