Как поменять направление Flex?

Основы flex-direction

Визуальное направление элементов в Flexbox контролируется свойством flex-direction. Это основное свойство flex-контейнера, которое определяет главную ось расположения.

Четыре основных значения

1. flex-direction: row (значение по умолчанию)

• Элементы выстраиваются в строку слева направо
• На горизонтальной оси (main axis)

2. flex-direction: column

• Элементы выстраиваются в колонку сверху вниз
• На вертикальной оси

3. flex-direction: row-reverse

• Элементы в строку, но справа налево
• Обратный порядок по горизонтали

4. flex-direction: column-reverse

• Элементы в колонку, но снизу вверх
• Обратный порядок по вертикали

Практические примеры

// Основной flex-контейнер
const flexContainer = document.querySelector(.flex);

// Менять направление по клику
function toggleDirection() {
  const styles = [
    row,
    column,
    row-reverse,
    column-reverse
  ];
  
  let current = flexContainer.style.flexDirection || row;
  let nextIndex = (styles.indexOf(current) + 1) % styles.length;
  flexContainer.style.flexDirection = styles[nextIndex];
}

// CSS подход
const css = `
  .flex {
    display: flex;
    flex-direction: row; /* по умолчанию */
  }
  
  .flex.column {
    flex-direction: column;
  }
  
  .flex.reversed {
    flex-direction: row-reverse;
  }
`;

Влияние на оси

Когда вы меняете flex-direction, меняется направление главной оси (main axis):

• row/row-reverse → главная ось горизонтальная
• column/column-reverse → главная ось вертикальная

Поперечная ось (cross axis) всегда перпендикулярна главной оси.

Практическое применение

// Адаптивный макет
const StyleComponent = () => {
  const isMobile = window.innerWidth < 768;
  
  return `
    .container {
      display: flex;
      flex-direction: ${isMobile ? column : row};
      gap: 16px;
    }
  `;
};

// React пример
import { useState } from react;

export function FlexDirectionToggle() {
  const [direction, setDirection] = useState(row);
  
  return (
    <div style={{ display: flex, flexDirection: direction }}>
      <button onClick={() => setDirection(row)}>Row</button>
      <button onClick={() => setDirection(column)}>Column</button>
      <button onClick={() => setDirection(row-reverse)}>Row Reverse</button>
    </div>
  );
}

Важные замечания

• flex-direction наследуется только на прямые потомки flex-контейнера
• Если вложить flex-контейнер в flex-контейнер, направление работает независимо
• На чистом JavaScript используй .style.flexDirection для изменения
• В React передавай flexDirection в инлайн-стили или используй CSS классы
• Помни про визуальный порядок vs. DOM-порядок при использовании *-reverse