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);

<header>
  <h2 class="title">element.style.flexDirection</h2>
  <p class="description">Визначає напрямок розташування гнучких елементів у контейнері Flexbox</p>
</header>
<main>
  <div class="result">
    <!-- Перемикачі для вибору напрямку flexDirection -->
    <label>
      <input type="radio" name="flexDirection" value="row" checked> Row
    </label>
    <label>
      <input type="radio" name="flexDirection" value="row-reverse"> Row Reverse
    </label>
    <label>
      <input type="radio" name="flexDirection" value="column"> Column
    </label>
    <label>
      <input type="radio" name="flexDirection" value="column-reverse"> Column Reverse
    </label>
    
    <!-- Гнучкий контейнер -->
    <div class="flex-container" id="flexContainer">
      <div class="flex-item">Елемент 1</div>
      <div class="flex-item">Елемент 2</div>
      <div class="flex-item">Елемент 3</div>
    </div>
  </div>
</main>

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;
  background-color: #ddd;
  padding: 10px;
}

.flex-item {
  background-color: #4CAF50;
  color: white;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

document.querySelectorAll('input[name="flexDirection"]').forEach(radio => {
  radio.addEventListener('change', function () {
    const flexDirection = this.value;
    const container = document.getElementById('flexContainer');

    // Застосування нового значення flexDirection
    container.style.flexDirection = flexDirection;
  });
});
//# sourceURL=pen.js

<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();