В каких направлениях одновременно может работать Flex

В каких направлениях одновременно может работать Flex?

Краткий ответ

Flexbox НЕ может работать в двух направлениях одновременно. Он работает только в одном направлении:

• Либо по горизонтали (строки) - flex-direction: row
• Либо по вертикали (столбцы) - flex-direction: column

Для работы в двух направлениях одновременно нужно использовать CSS Grid.

Flexbox направления

1. Горизонтальное (по строкам)

.container {
  display: flex;
  flex-direction: row; /* По умолчанию */
  gap: 10px;
}

.item {
  flex: 1; /* Каждый займет равное место */
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Результат:

┌─────────────────────────┐
│  1   │  2   │  3   │
└─────────────────────────┘

2. Вертикальное (по столбцам)

.container {
  display: flex;
  flex-direction: column; /* Вертикально */
  gap: 10px;
  height: 300px;
}

.item {
  flex: 1; /* Каждый займет равное место по высоте */
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

Результат:

┌─────┐
│  1  │
├─────┤
│  2  │
├─────┤
│  3  │
└─────┘

3. Обратные направления

/* Горизонтально в обратном порядке */
.container {
  flex-direction: row-reverse;
}

/* Вертикально в обратном порядке */
.container {
  flex-direction: column-reverse;
}

Важное уточнение: главная ось vs поперечная ось

Flex работает с двумя осями, но расширение происходит только по главной оси:

.container {
  display: flex;
  flex-direction: row; /* Главная ось - горизонтальная */
  /* Поперечная ось - вертикальная */
}

/* Выравнивание по главной оси (flex-direction: row) */
.container {
  justify-content: center; /* Горизонтальное выравнивание */
}

/* Выравнивание по поперечной оси */
.container {
  align-items: center; /* Вертикальное выравнивание */
}

Это не означает, что flex работает в двух направлениях - это просто две разные оси.

Почему Flexbox не работает в двух направлениях

Пример проблемы:

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

<style>
  .flex-container {
    display: flex;
    flex-direction: row; /* Только горизонтально! */
    flex-wrap: wrap; /* Переносит на новую строку */
  }
  
  .flex-container > div {
    flex: 0 0 calc(33.33% - 10px); /* 3 колонки */
    height: 100px;
  }
</style>

Результат: элементы расположены в две строки по 3 колонки. Но это не "работа в двух направлениях" - это просто перенос на новую строку. Flex остается однонаправленным.

Решение: CSS Grid для двумерного расположения

Если нужна работа в двух направлениях одновременно, используй CSS Grid:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 колонки */
  grid-template-rows: auto auto; /* 2 строки */
  gap: 10px;
}

.grid-item {
  background: #3498db;
  padding: 20px;
  text-align: center;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

Результат:

┌─────────┬─────────┬─────────┐
│    1    │    2    │    3    │
├─────────┼─────────┼─────────┤
│    4    │    5    │    6    │
└─────────┴─────────┴─────────┘

Grid расположение контролируется по двум осям одновременно!

Сравнение Flexbox vs Grid

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

Пример 1: Flexbox - навигация (1D)

.navbar {
  display: flex;
  flex-direction: row; /* Горизонтально */
  gap: 20px;
  padding: 15px;
}

.nav-item {
  flex: 0 0 auto;
}

Пример 2: Flexbox + wrap - имитация Grid (но не настоящий Grid)

.gallery {
  display: flex;
  flex-wrap: wrap; /* Переносит на новую строку */
  gap: 15px;
}

.photo {
  flex: 0 0 calc(25% - 15px); /* 4 колонки */
  aspect-ratio: 1; /* Квадратные фото */
}

@media (max-width: 768px) {
  .photo {
    flex: 0 0 calc(50% - 15px); /* 2 колонки на мобильных */
  }
}

Это выглядит как 2D, но Flex остается 1D.

Пример 3: Grid - настоящее 2D расположение

.dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-template-rows: auto; /* Строки автоматически */
  gap: 20px;
}

.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

Когда использовать что

Используй Flexbox когда:

• Нужно выровнять элементы в одну линию (или с переносом)
• Навигация, меню, списки
• Один направление доминирует

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Используй Grid когда:

• Нужно контролировать расположение в двух направлениях
• Layouts, сетки товаров
• Сложные позиционирования

.page-layout {
  display: grid;
  grid-template-columns: 200px 1fr 200px; /* Sidebar - main - sidebar */
  grid-template-rows: auto 1fr auto; /* Header - main - footer */
  min-height: 100vh;
}

Гибридный подход

Обычно используют Grid для разметки, Flex для содержимого:

/* Grid для основного макета */
.page {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 20px;
}

/* Flex для содержимого внутри колонок */
.main {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  display: flex;
  flex-direction: row; /* Картинка слева, текст справа */
  gap: 15px;
}

Заключение

Flexbox работает ТОЛЬКО в одном направлении - это его основное ограничение, но также и его сила (простота).

Для работы в двух направлениях одновременно используй CSS Grid. Grid - это истинно двумерная система, в то время как Flexbox - одномерная с возможностью переноса на новую строку.

В современной разработке лучший подход:

• Grid для основного макета страницы
• Flexbox для элементов внутри контейнеров