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

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

element.style.flexWrap - це властивість, яка визначає, чи будуть flex-елементи переноситись на новий рядок/стовпчик у flex-контейнері або залишатись в одному рядку/стовпчику. Вона є частиною моделі flexbox у CSS і дозволяє контролювати, як елементи будуть обтікати всередині контейнера.

Властивість flexWrap має три основні значення:

1. nowrap - елементи не переносяться на новий рядок/стовпчик, а залишаються в одному, незалежно від їх кількості та розміру.
2. wrap - елементи переносяться на новий рядок/стовпчик, коли це необхідно, щоб відповідати розміру контейнера.
3. wrap-reverse - елементи також переносяться на новий рядок/стовпчик, але в зворотному порядку.

Для того, щоб змінити або отримати значення властивості flexWrap у JavaScript, ви можете використовувати element.style.flexWrap. Це дозволяє динамічно змінювати поведінку flex-елементів.

Приклад використання

// Отримуємо доступ до контейнера з id "flexContainer"
var container = document.getElementById("flexContainer");

// Встановлюємо значення flexWrap для контейнера
container.style.flexWrap = "wrap";

// Отримуємо значення flexWrap для контейнера
var flexWrapValue = container.style.flexWrap;
console.log(flexWrapValue); // Виведе "wrap"

У цьому прикладі ми спочатку отримуємо доступ до елемента з id flexContainer, потім встановлюємо значення flexWrap на wrap. Це означає, що flex-елементи всередині контейнера будуть переноситись на новий рядок/стовпчик, коли не вистачає місця. Потім ми отримуємо значення flexWrap і виводимо його в консоль.

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

правити

Порада

Змінення flexWrap впливає тільки на елементи, які є дочірніми елементами контейнера з дисплеєм flex (встановленим через display: flex). Використання властивості на елементі, який не є flex-контейнером, не матиме ніякого ефекту.

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

Нотатка

Значення flexWrap може бути тільки одним із трьох вказаних: nowrap, wrap, wrap-reverse. Встановлення некоректних значень призведе до того, що браузер проігнорує цю властивість.

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

Нотатка

Якщо flexWrap не встановлено, використовується значення за замовчуванням, яке дорівнює nowrap.

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

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

Синтаксис

element.style.flexWrap

Переглядачі

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

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

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

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

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

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

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

Приклади

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

<div class="gallery">перший елемент gallery</div>
<div class="gallery">другий елемент gallery</div>

const gallery = document.querySelector('.gallery');
gallery.style.display = 'flex';
gallery.style.flexWrap = 'wrap';

// Додаємо кілька зображень до галереї
for (let i = 1; i <= 10; i++) {
  const img = document.createElement('img');
  img.src = `https://via.placeholder.com/150?text=Image+${i}`;
  img.style.flex = '1 1 150px';
  img.style.margin = '10px';
  gallery.appendChild(img);
}

<div class="nav">перший елемент nav</div>
<div class="nav">другий елемент nav</div>

const nav = document.querySelector('.nav');
nav.style.display = 'flex';
nav.style.flexWrap = 'wrap';

// Додаємо кілька елементів навігації
const items = ['Home', 'About', 'Services', 'Portfolio', 'Contact'];
items.forEach(item => {
  const navItem = document.createElement('div');
  navItem.textContent = item;
  navItem.style.flex = '1 1 auto';
  navItem.style.padding = '10px';
  navItem.style.boxSizing = 'border-box';
  navItem.style.textAlign = 'center';
  nav.appendChild(navItem);
});