Как называются оси в flexbox?

Оси в Flexbox

В Flexbox существуют два ключевых концепта — главная ось и поперечная ось. Они определяют направление размещения элементов и управляют выравниванием.

Основные оси

Main Axis (Главная ось)

Это ось, вдоль которой по умолчанию располагаются flex-элементы. Направление главной оси определяется свойством flex-direction:

.container {
  display: flex;
  flex-direction: row; /* Горизонтальное направление слева направо (по умолчанию) */
}

Элементы выстраиваются в линию вдоль главной оси. Начало главной оси называется main start, конец — main end.

Cross Axis (Поперечная ось)

Это ось перпендикулярная главной оси. Если flex-direction = row, то поперечная ось — вертикальная. Если flex-direction = column, то поперечная ось — горизонтальная.

Начало поперечной оси — cross start, конец — cross end.

Направления flex-direction и их влияние на оси

/* row (по умолчанию) */
.flex-row {
  display: flex;
  flex-direction: row;
  /* Main Axis: слева направо (→) */
  /* Cross Axis: сверху вниз (↓) */
}

/* row-reverse */
.flex-row-reverse {
  flex-direction: row-reverse;
  /* Main Axis: справа налево (←) */
  /* Cross Axis: сверху вниз (↓) */
}

/* column */
.flex-column {
  flex-direction: column;
  /* Main Axis: сверху вниз (↓) */
  /* Cross Axis: слева направо (→) */
}

/* column-reverse */
.flex-column-reverse {
  flex-direction: column-reverse;
  /* Main Axis: снизу вверх (↑) */
  /* Cross Axis: слева направо (→) */
}

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

<style>
  .container {
    display: flex;
    flex-direction: row; /* Main Axis — горизонтально, Cross Axis — вертикально */
    width: 400px;
    height: 200px;
    border: 2px solid blue;
  }
  
  .item {
    width: 50px;
    height: 50px;
    background: salmon;
    margin: 10px;
  }
</style>

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

В этом примере:

• Элементы располагаются вдоль главной оси (слева направо)
• Можно выравнивать элементы вдоль главной оси через justify-content
• Можно выравнивать элементы вдоль поперечной оси через align-items

Свойства выравнивания, привязанные к осям

justify-content — выравнивание вдоль главной оси

.container {
  display: flex;
  justify-content: space-between; /* Распределение вдоль главной оси */
  /* Варианты: flex-start, flex-end, center, space-between, space-around, space-evenly */
}

align-items — выравнивание вдоль поперечной оси

.container {
  display: flex;
  align-items: center; /* Центрирование вдоль поперечной оси */
  /* Варианты: flex-start, flex-end, center, stretch, baseline */
}

align-content — выравнивание строк/столбцов вдоль поперечной оси (когда есть перенос на несколько линий)

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
  align-content: space-between; /* Выравнивание нескольких строк */
}

Наглядная схема

Для flex-direction: row:

┌─────────────────────────────────────┐
│ Main Axis (главная ось) →          │ Cross Axis
│ ┌─────┐  ┌─────┐  ┌─────┐          │ (поперечная ось)
│ │  1  │  │  2  │  │  3  │          │ ↓
│ └─────┘  └─────┘  └─────┘          │
└─────────────────────────────────────┘

Для flex-direction: column:

┌──────────────────┐
│ Main Axis        │ Cross Axis (→)
│      ↓           │
│ ┌──────────┐     │
│ │    1     │     │
│ └──────────┘     │
│ ┌──────────┐     │
│ │    2     │     │
│ └──────────┘     │
│ ┌──────────┐     │
│ │    3     │     │
│ └──────────┘     │
└──────────────────┘

Ключевые моменты

1. Главная ось определяется flex-direction — элементы по ней располагаются
2. Поперечная ось всегда перпендикулярна главной — для выравнивания в другом направлении
3. justify-content работает с главной осью — управляет расстояниями между элементами
4. align-items работает с поперечной осью — выравнивает элементы вбок от главной оси
5. flex-direction изменяет ориентацию обеих осей — меняет логику всего раскладки

Понимание этих двух осей — основа эффективной работы с Flexbox.