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

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

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

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

1. row: Гнучкі елементи розташовуються в рядок зліва направо (за замовчуванням).
2. row-reverse: Гнучкі елементи розташовуються в рядок справа наліво.
3. column: Гнучкі елементи розташовуються в колонку зверху вниз.
4. column-reverse: Гнучкі елементи розташовуються в колонку знизу вверх.

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

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

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

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

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

   const container = document.getElementById('flexContainer');
   const direction = container.style.flexDirection;
   console.log(direction);
   

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

Приклади

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

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

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

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

const container = document.getElementById('flexContainer');
container.style.flexDirection = 'column-reverse';

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

Динамічна зміна напрямку

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

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

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

У цьому прикладі, при натисканні кнопки з id changeDirectionButton, напрямок розташування елементів у контейнері змінюється між рядком і колонкою.

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

правити

Порада

Властивість flexDirection часто використовують разом з іншими властивостями Flexbox, такими як justifyContent, alignItems та flexWrap, для досягнення бажаного розташування елементів.

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

Порада

Використовуючи JavaScript, ви можете динамічно змінювати напрямок розташування елементів у залежності від певних умов або подій, таких як натискання кнопки чи зміна розміру вікна.

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

Порада

Можна комбінувати flexDirection із media queries для адаптивного дизайну. Наприклад, використовуйте JavaScript для перевірки розміру вікна та змінюйте напрямок елементів на основі цієї перевірки:

if (window.innerWidth < 600) {
  element.style.flexDirection = 'column';
} else {
  element.style.flexDirection = 'row';
}

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

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

Синтаксис

element.style.flexDirection

Переглядачі

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

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

Переглядач
	29	22	9	12.1	12	11

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

Переглядач
	4.4	29	22	9

Приклади

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

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

const chatContainer = document.getElementById('chatContainer');
const messages = chatContainer.children;

function reverseChatDirection() {
  chatContainer.style.flexDirection = chatContainer.style.flexDirection === 'column' ? 'column-reverse' : 'column';
}

document.getElementById('reverseButton').addEventListener('click', reverseChatDirection);

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

const gallery = document.getElementById('gallery');
const images = gallery.children;

function updateGalleryDirection() {
  const windowWidth = window.innerWidth;
  gallery.style.flexDirection = windowWidth > 800 ? 'row' : 'column';
}

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