За что отвечает Align-Content

За что отвечает Align-Content

Align-Content - это CSS свойство для контейнеров Flexbox и Grid, которое управляет выравниванием линий контента вдоль поперечной оси (cross-axis) когда есть свободное место.

Важное уточнение: Align-Content vs Align-Items

// Эти свойства часто путают!

// align-items     => выравнивает ЭЛЕМЕНТЫ внутри каждой линии
// align-content   => выравнивает ЛИНИИ (flex-wrap или grid rows) целиком

Визуально:

align-items (выравнивание элементов в линии):
┌──────────────────────┐
│ [item1] [item2]      │  <- одна линия
│ [item3] [item4]      │  <- вторая линия
└──────────────────────┘

align-content (выравнивание самих линий):
┌──────────────────────┐
│ [item1] [item2]      │  <- линия 1
│ [item3] [item4]      │  <- линия 2
│ (пустое место)       │  <- свободное место
└──────────────────────┘

Работает только когда:

1. Flexbox с flex-wrap: wrap

.container {
  display: flex;
  flex-wrap: wrap;        /* Элементы переходят на новую линию */
  height: 400px;          /* Достаточно места для выравнивания */
  align-content: center;  /* Центрируем линии */
}

1. CSS Grid с несколькими рядами

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 500px;          /* Высота больше чем нужно элементам */
  align-content: space-between; /* Расстояние между рядами */
}

Значения Align-Content

1. flex-start (по умолчанию)

<div class="flex-container flex-start">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  width: 200px;
  height: 300px;
  border: 1px solid #000;
  align-content: flex-start;  /* Линии в начало */
}

.box {
  width: 90px;
  height: 40px;
  background: lightblue;
  margin: 5px;
}
</style>

Результат:
┌──────────────────┐
│ [1] [2]          │  <- линия 1 в начале
│ [3] [4]          │  <- линия 2
│                  │  <- свободное место внизу
└──────────────────┘

2. flex-end

align-content: flex-end;  /* Линии в конец */

┌──────────────────┐
│                  │  <- свободное место вверху
│ [1] [2]          │  <- линия 1
│ [3] [4]          │  <- линия 2 в конце
└──────────────────┘

3. center

align-content: center;  /* Линии по центру */

┌──────────────────┐
│                  │  <- свободное место
│ [1] [2]          │  <- линия 1
│ [3] [4]          │  <- линия 2
│                  │  <- свободное место
└──────────────────┘

4. space-between

align-content: space-between;  /* Равное расстояние между линиями */

┌──────────────────┐
│ [1] [2]          │  <- линия 1
│                  │  <- равное расстояние
│ [3] [4]          │  <- линия 2
│                  │  <- равное расстояние
│ [5] [6]          │  <- линия 3
└──────────────────┘

5. space-around

align-content: space-around;  /* Расстояние вокруг каждой линии */

┌──────────────────┐
│                  │  <- расстояние
│ [1] [2]          │  <- линия 1
│                  │  <- расстояние
│                  │  <- расстояние
│ [3] [4]          │  <- линия 2
│                  │  <- расстояние
└──────────────────┘

6. space-evenly

align-content: space-evenly;  /* Равное расстояние везде */

┌──────────────────┐
│                  │  <- расстояние
│ [1] [2]          │  <- линия 1
│                  │  <- расстояние
│ [3] [4]          │  <- линия 2
│                  │  <- расстояние
└──────────────────┘

7. stretch (по умолчанию для Grid)

align-content: stretch;  /* Линии растягиваются */

┌──────────────────┐
│ [1] [2]          │  <- линия 1 растянута
│ [3] [4]          │  <- линия 2 растянута
└──────────────────┘

Практический пример: галерея с Flexbox

<div class="gallery">
  <div class="image">Image 1</div>
  <div class="image">Image 2</div>
  <div class="image">Image 3</div>
  <div class="image">Image 4</div>
  <div class="image">Image 5</div>
</div>

<style>
.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;    /* горизонтальное выравнивание */
  align-content: space-between;     /* вертикальное выравнивание линий */
  width: 600px;
  height: 400px;
  border: 2px solid #333;
}

.image {
  width: 150px;
  height: 150px;
  background: lightblue;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

CSS Grid пример

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(2, 80px);
  
  width: 400px;
  height: 300px;              /* Высота больше чем нужно */
  
  align-content: center;      /* Центрируем все ряды */
  justify-content: center;    /* Центрируем все колонки */
  
  gap: 10px;
}

.grid-item {
  background: lightcoral;
  display: flex;
  align-items: center;
  justify-content: center;
}

Отличие от Align-Items

.container {
  display: flex;
  flex-wrap: wrap;
  height: 300px;
}

/* align-items: центрирует элементы ВНУТРИ каждой линии */
.container.with-items {
  align-items: center;
}
/* Результат: элементы центрированы по высоте, но линии спрессованы */

/* align-content: центрирует сами ЛИНИИ */
.container.with-content {
  align-content: center;
}
/* Результат: линии распределены по всей высоте */

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

Используй align-content когда:

1. У тебя контейнер с flex-wrap: wrap
2. Есть свободное место по поперечной оси
3. Нужно выравнять несколько строк целиком
4. Работаешь с Grid и несколькими рядами

Примеры реальных случаев:

/* Галерея с несколькими рядами */
.photo-gallery {
  display: flex;
  flex-wrap: wrap;
  height: 500px;
  align-content: space-between;  /* Расстояние между рядами */
}

/* Список тегов */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;  /* Теги в начало */
}

/* Гридовая сетка товаров */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  min-height: 100vh;
  align-content: start;  /* Контент вверху */
}

Поддержка браузеров

align-content поддерживается:
- Chrome: все версии
- Firefox: все версии
- Safari: все версии
- Edge: все версии
- IE 11: НЕ поддерживается (только для Grid)

Частые ошибки

/* ОШИБКА 1: забыли flex-wrap */
.container {
  display: flex;
  height: 300px;
  align-content: center;  /* НЕ СРАБОТАЕТ! нет переноса линий */
}

/* ПРАВИЛЬНО */
.container {
  display: flex;
  flex-wrap: wrap;        /* ОБЯЗАТЕЛЬНО! */
  height: 300px;
  align-content: center;  /* Теперь сработает */
}

/* ОШИБКА 2: путают с align-items */
.container {
  display: flex;
  align-content: center;  /* Выравнивает линии, а не элементы */
}

/* ПРАВИЛЬНО для выравнивания элементов */
.container {
  display: flex;
  align-items: center;    /* Выравнивает элементы */
}

Итог

Align-Content отвечает за выравнивание линий контента по поперечной оси в контейнерах с flex-wrap или Grid когда есть свободное место. Ключевые моменты:

1. Работает только когда есть несколько линий/рядов
2. Выравнивает линии целиком, не элементы
3. Требует свободного места (высота контейнера > сумма высот линий)
4. Основные значения: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch
5. Не путай с align-items (выравнивание элементов внутри линии)