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

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

element.style.flexFlow – це властивість CSS, яку можна використовувати в JavaScript для встановлення або отримання значень властивостей flexDirection і flexWrap одночасно. Вона дозволяє визначити напрямок і спосіб переносу гнучких елементів у контейнері Flexbox, спрощуючи керування цими двома властивостями за допомогою одного виклику.

Властивість flexFlow може приймати два значення, об'єднані пробілом:

1. flexDirection: визначає напрямок розташування гнучких елементів (row, row-reverse, column, column-reverse).
2. flexWrap: визначає, чи будуть гнучкі елементи переноситися на новий рядок або колонку (nowrap, wrap, wrap-reverse).

Використання element.style.flexFlow:

1. Встановлення значення flexFlow:

   const container = document.getElementById('flexContainer');
   container.style.flexFlow = 'row wrap';
   

   У цьому прикладі ми встановлюємо напрямок розташування гнучких елементів у рядок (row) і дозволяємо їм переноситися на новий рядок (wrap).

2. Отримання значення flexFlow:

   const container = document.getElementById('flexContainer');
   const flexFlowValue = container.style.flexFlow;
   console.log(flexFlowValue);
   

   Цей код отримує поточне значення flexFlow для контейнера і виводить його у консоль.

Приклади

Використання column nowrap:

const container = document.getElementById('flexContainer');
container.style.flexFlow = 'column nowrap';

Цей приклад встановлює розташування гнучких елементів у колонку (column) і забороняє їм переноситися на новий рядок або колонку (nowrap).

Використання row-reverse wrap-reverse:

const container = document.getElementById('flexContainer');
container.style.flexFlow = 'row-reverse wrap-reverse';

Цей приклад змінює напрямок розташування гнучких елементів у рядок справа наліво (row-reverse) і дозволяє їм переноситися на новий рядок у зворотному напрямку (wrap-reverse).

Динамічна зміна напрямку та переносу

Розглянемо приклад динамічної зміни значення flexFlow у залежності від натискання кнопки:

const button = document.getElementById('changeFlexFlowButton');
const container = document.getElementById('flexContainer');

button.addEventListener('click', () => {
  if (container.style.flexFlow === 'row nowrap') {
    container.style.flexFlow = 'column wrap';
  } else {
    container.style.flexFlow = 'row nowrap';
  }
});

У цьому прикладі, при натисканні кнопки з id changeFlexFlowButton, значення flexFlow змінюється між row nowrap та column wrap.

Властивість element.style.flexFlow є корисним інструментом для одночасного управління напрямком і способом переносу гнучких елементів у контейнері Flexbox, забезпечуючи зручність та гнучкість у створенні складних макетів.

Синтаксис

element.style.flexFlow

Значення

Return

Переглядачі

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

Приклади

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

const container = document.getElementById('container');
const items = container.children;

function updateFlexFlow() {
  const windowWidth = window.innerWidth;
  if (windowWidth > 1200) {
    container.style.flexFlow = 'row wrap';
  } else if (windowWidth > 800) {
    container.style.flexFlow = 'row nowrap';
  } else {
    container.style.flexFlow = 'column nowrap';
  }
}

window.addEventListener('resize', updateFlexFlow);
updateFlexFlow();

const dashboard = document.getElementById('dashboard');
const widgets = dashboard.children;

function toggleFlexFlow() {
  const currentFlow = dashboard.style.flexFlow;
  dashboard.style.flexFlow = currentFlow === 'row wrap' ? 'column nowrap' : 'row wrap';
}

document.getElementById('toggleButton').addEventListener('click', toggleFlexFlow);