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-елементи поводяться всередині контейнера. Використовуючи цю властивість, ви можете контролювати, чи будуть елементи переноситись на новий рядок/стовпчик, що забезпечує гнучкість і адаптивність макета вашої веб-сторінки. Це особливо корисно для створення респонсивного дизайну, де важливо, щоб вміст адаптувався до різних розмірів екранів та пристроїв.

автор: Bond

Порада

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

автор: Bond
Нотатка

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

автор: Bond
Нотатка

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

автор: Bond

Синтаксис

element.style.flexWrap

Переглядачі

Переглядач Google Chrome Mozilla Firefox Apple Safari Opera Microsoft EDGE Microsoft Internet Explorer
29 28 9 16 12 11*
Переглядач Mobile Google Android Mobile Google Chrome Mobile Mozilla Firefox Mobile Apple Safari
4.4 29 28 9

Приклади

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

HTML

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

JS

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 = photo(i);
  img.style.flex = '1 1 150px';
  img.style.margin = '10px';
  gallery.appendChild(img);
}

// — службове: замість чужих фотографій картинки збираються просто тут —
function photo(n) {
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'>`
    + `<rect width='150' height='150' fill='hsl(${n * 36} 65%25 55%25)'/>`
    + `<text x='75' y='97' font-size='64' text-anchor='middle' fill='%23fff'>${n}</text></svg>`;

  return `data:image/svg+xml,${svg}`;
}
автор: Bond

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

HTML

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

JS

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);
});
автор: Bond

HTML

<header>
  <h2 class="title">element.style.flexWrap</h2>
  <p class="description">Контролює перенесення елементів у флекс-контейнері на новий рядок, якщо місця недостатньо.</p>
</header>
<main>
  <div class="result">
    <div class="gallery" id="gallery">
      <!-- Додаємо кілька зображень для демонстрації -->
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="150" height="150" alt="Зразок" class="item">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="150" height="150" alt="Зразок" class="item">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="150" height="150" alt="Зразок" class="item">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="150" height="150" alt="Зразок" class="item">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="150" height="150" alt="Зразок" class="item">
      <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" width="150" height="150" alt="Зразок" class="item">
    </div>
    <div class="controls">
      <label for="flexWrap">Виберіть flexWrap:</label>
      <select id="flexWrap" onchange="updateFlexWrap()">
        <option value="nowrap">nowrap</option>
        <option value="wrap">wrap</option>
        <option value="wrap-reverse">wrap-reverse</option>
      </select>
    </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);
}

.gallery {
  display: flex;
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 20px;
}

.item {
  flex: 1 1 150px;
  margin: 10px;
}

.controls {
  margin-top: 15px;
}

JS

function updateFlexWrap() {
  const gallery = document.getElementById('gallery');
  const flexWrapValue = document.getElementById('flexWrap').value;
  gallery.style.flexWrap = flexWrapValue;
}

// Початкове налаштування
updateFlexWrap();
//# sourceURL=pen.js
автор: Bond

Коментарі

Коментарів ще немає — будьте першим!

Відповідь для

Як форматувати текст?
Пишемо Виходить
**важливо**
*акцент*
~~застаріле~~		 Виділення в тексті. Те саме роблять кнопки панелі, що спливає над виділеним.
## Як працює каскад
### Порядок оголошень		 Заголовки всередині тексту. Найбільший не потрібен — він у сторінки вже є.
[[css/property/color]] Посилання на сторінку довідника. Наберіть [[ — поле веде сходинками (розділ → тип → сторінка), а хибний ключ підкреслить хвилею.
[[!sandbox/S0oh1hBm]] Живий приклад окремим рядком — саме вікно результату. Той самий ключ зі знаком !: наберіть [[! і дійдіть сходинками до потрібної сторінки, список покаже її приклади.
[MDN](https://developer.mozilla.org) Посилання на чужий сайт.
![Схема каскаду](https://site.com/схема.png) Картинка. Опис обов'язковий: його читають пошуковик і незрячі.
Задайте `display: grid` контейнеру Код усередині речення.
```css
.card { display: grid }
```		 Код блоком. Мова після трьох лапок вмикає підсвітку.
- Походження
1. Походження		 Перелік: маркований і нумерований.
- [ ] дописати приклади
- [x] перевірити в Firefox		 Перелік завдань із галочками. Пробіл у порожніх дужках обов'язковий.
> Порядок важить лише за рівної ваги. Цитата на всю ширину абзацу.
Специфічність
: вага селектора; більша перемагає		 Список означень: термін, а під ним пояснення з відступом. Пробіл після двокрапки обов'язковий.
Каскад має три критерії[^1]
[^1]: Походження, специфічність, порядок.		 Виноска: номер у тексті, примітка внизу сторінки. Без згадки [^1] у тексті примітка не з'явиться.
Відповідь: ||сорок два|| Ховає те, що між рисками: читач бачить на цьому місці розмиту пляму, а решта речення лишається звичайною. Клац — і текст відкрито.
|| Показати рішення
Задайте контейнеру `display: grid`.
||		 Ховає цілі абзаци. На сторінці видно лише підпис із першого рядка («Показати рішення»), решта розгортається клацанням по ньому. Закривні риски — окремим рядком.
Порожній рядок Новий абзац. Щоб перенести рядок усередині абзацу, поставте \ в його кінці.

Увійдіть — коментар з'явиться одразу, без капчі й очікування перевірки.

Правка
Зворотний зв'язок
Вхід