Для чего нужны Flex?

CSS Flexbox - гибкая раскладка элементов

Flexbox (Flexible Box Layout) — это CSS модуль, который предоставляет эффективный способ упорядочивать, распределять и выравнивать элементы в контейнере, даже если их размеры заранее неизвестны или динамичны.

Основная проблема, которую решает Flexbox

Без Flexbox (только float и position):

/* Плохо: сложно, хрупко, не гибко */
.container {
  overflow: auto;
}

.item {
  float: left;
  width: 25%;
  margin: 10px;
  box-sizing: border-box;
}

/* Нужно вручную считать: 25% - 20px = ??? */

С Flexbox (просто и гибко):

.container {
  display: flex;
  gap: 10px;
}

.item {
  flex: 1;  /* Автоматически делит пространство поровну */
}

Как работает Flexbox

Основная идея:

• Контейнер устанавливает display: flex
• Дочерние элементы автоматически становятся flex-элементами
• Элементы могут расти, сжиматься и выравниваться

Терминология:

• Flex-контейнер: элемент с display: flex
• Flex-элементы: прямые потомки контейнера
• Main axis: основная ось (по умолчанию горизонтальная)
• Cross axis: поперечная ось (перпендикулярна main axis)

Основные свойства flex-контейнера

1. flex-direction - направление элементов:

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

2. justify-content - выравнивание по основной оси:

.container {
  display: flex;
  
  /* flex-start (по умолчанию) - в начало */
  justify-content: flex-start;
  
  /* center - по центру */
  justify-content: center;
  
  /* flex-end - в конец */
  justify-content: flex-end;
  
  /* space-between - равномерно с краями */
  justify-content: space-between;
  
  /* space-around - равномерно со свободным местом вокруг */
  justify-content: space-around;
  
  /* space-evenly - равномерно везде */
  justify-content: space-evenly;
}

3. align-items - выравнивание по поперечной оси:

.container {
  display: flex;
  height: 200px;  /* Нужна высота!
  
  /* stretch (по умолчанию) - растянуть */
  align-items: stretch;
  
  /* center - по центру */
  align-items: center;
  
  /* flex-start - в начало */
  align-items: flex-start;
  
  /* flex-end - в конец */
  align-items: flex-end;
  
  /* baseline - по базовой линии текста */
  align-items: baseline;
}

4. flex-wrap - перенос элементов:

.container {
  display: flex;
  
  /* nowrap (по умолчанию) - всё в одну строку */
  flex-wrap: nowrap;
  
  /* wrap - переносить на новую строку */
  flex-wrap: wrap;
  
  /* wrap-reverse - переносить, но в обратном порядке */
  flex-wrap: wrap-reverse;
}

5. gap - расстояние между элементами:

.container {
  display: flex;
  gap: 20px;           /* Одинаковый gap */
  gap: 20px 10px;      /* row-gap: 20px; column-gap: 10px */
}

Основные свойства flex-элементов

1. flex - основное свойство для гибкости:

/* flex = flex-grow flex-shrink flex-basis */

.item {
  flex: 1;        /* grow: 1, shrink: 1, basis: 0% */
  flex: 1 2 200px; /* grow: 1, shrink: 2, basis: 200px */
  flex: 0 0 100px; /* не растет, не сжимается, базис 100px */
}

2. flex-grow - как много пространства взять:

.item1 { flex-grow: 1; }   /* Возьмет в 2 раза больше */
.item2 { flex-grow: 2; }   /* Возьмет в 2 раза больше */
.item3 { flex-grow: 0; }   /* Не растет */

3. flex-shrink - как сжиматься:

.item1 { flex-shrink: 1; }   /* Сжимается нормально */
.item2 { flex-shrink: 2; }   /* Сжимается в 2 раза больше */
.item3 { flex-shrink: 0; }   /* Не сжимается */

4. flex-basis - базовый размер:

.item1 { flex-basis: 200px; }   /* Начальная ширина 200px */
.item2 { flex-basis: 50%; }     /* 50% от контейнера */
.item3 { flex-basis: auto; }    /* Размер содержимого */

5. align-self - выравнивание одного элемента:

.item {
  align-self: center;      /* Переопределить align-items */
  align-self: flex-start;
  align-self: stretch;
}

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

1. Центрировать элемент идеально:

.container {
  display: flex;
  justify-content: center;  /* По горизонтали */
  align-items: center;      /* По вертикали */
  height: 100vh;
}

2. Навигационная панель:

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #333;
}

.navbar .logo {
  font-weight: bold;
}

.navbar .links {
  display: flex;
  gap: 20px;
}

.navbar .links a {
  color: white;
  text-decoration: none;
}

3. Карточки в сетке с одинаковыми размерами:

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 1 calc(25% - 15px);  /* 4 карточки в ряду */
  min-width: 200px;            /* Не сжимать ниже 200px */
}

/* На мобильных */
@media (max-width: 768px) {
  .card {
    flex: 1 1 calc(50% - 10px);  /* 2 карточки в ряду */
  }
}

4. Липкий footer:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1;  /* Занимает всё оставшееся место */
}

footer {
  flex: 0 0 auto;  /* Не растет, не сжимается */
  background: #333;
  padding: 20px;
}

5. Элементы с разными flex значениями:

.container {
  display: flex;
  height: 200px;
}

.sidebar {
  flex: 0 0 200px;  /* Фиксированная ширина 200px */
  background: #eee;
}

.content {
  flex: 1;          /* Занимает оставшееся место */
  background: white;
}

.widget {
  flex: 0 1 150px;  /* Может сжаться, но не расти */
  background: #f0f0f0;
}

Flexbox vs Grid

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

Хорошие случаи:

1. Навигационные панели
2. Списки элементов в одну строку
3. Центрирование контента
4. Распределение пространства между элементами
5. Липкий footer, header
6. Простые одномерные макеты

Плохие случаи:

1. Сложные двумерные макеты (используй Grid)
2. Когда нужна точная позиция каждого элемента

Лучшие практики

1. Используй gap вместо margin для расстояний
2. Помни о min-width: 0 для flex-элементов с overflow
3. Комбинируй Flexbox и Grid для лучшего результата
4. Тестируй на разных размерах экрана
5. Используй flex-wrap: wrap для адаптивности