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

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

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

Основные случаи использования

1. Выравнивание элементов в строке

<nav class="navbar">
  <div class="logo">Logo</div>
  <ul class="menu">
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
  <button class="auth">Login</button>
</nav>

.navbar {
  display: flex;
  justify-content: space-between; /* Logo слева, menu посередине, Login справа */
  align-items: center;             /* Все элементы выравнены по центру по высоте */
  padding: 1rem;
}

.menu {
  display: flex;
  gap: 2rem; /* Промежуток между пунктами меню */
  list-style: none;
}

Преимущества:

• Легко выравнивать элементы
• Не нужны float'ы или absolute positioning
• Гибкое распределение пространства

2. Создание макета карточек

<div class="cards-container">
  <div class="card">
    <img src="image.jpg" />
    <h3>Card Title</h3>
    <p>Description...</p>
    <button>Action</button>
  </div>
  <!-- Много карточек... -->
</div>

.cards-container {
  display: flex;
  flex-wrap: wrap;      /* Переносит на новую строку при нехватке места */
  gap: 1rem;            /* Промежуток между карточками */
  justify-content: center; /* Центрирует карточки */
}

.card {
  flex: 0 1 300px;      /* flex-grow: 0, flex-shrink: 1, flex-basis: 300px */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card button {
  margin-top: auto;     /* Кнопка внизу карточки */
}

3. Центрирование контента (классическая задача)

/* Центрирование по обоим осям */
.modal {
  display: flex;
  justify-content: center;  /* По горизонтали */
  align-items: center;      /* По вертикали */
  width: 100%;
  height: 100vh;
}

.modal-content {
  width: 500px;
  background: white;
  padding: 2rem;
}

Это намного проще, чем:

/* ❌ Старый способ с absolute */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. Панель с инструментами (toolbar)

<div class="toolbar">
  <button>Save</button>
  <button>Edit</button>
  <button>Delete</button>
  <div class="spacer"></div> <!-- Промежуток -->
  <button>Settings</button>
</div>

.toolbar {
  display: flex;
  gap: 0.5rem;
  padding: 1rem;
  background: #f5f5f5;
}

.spacer {
  flex: 1; /* Занимает все свободное место */
}

5. Боковая панель + основной контент

<div class="layout">
  <aside class="sidebar">
    <!-- Меню или навигация -->
  </aside>
  <main class="content">
    <!-- Основной контент -->
  </main>
</div>

.layout {
  display: flex;
  height: 100vh;
}

.sidebar {
  flex: 0 0 250px;  /* Фиксированная ширина 250px */
  background: #333;
  overflow-y: auto;
}

.content {
  flex: 1;          /* Займет оставшееся место */
  overflow-y: auto;
}

6. Список элементов в столбец

<ul class="todo-list">
  <li class="todo-item">
    <input type="checkbox" />
    <span>Task 1</span>
    <button>Delete</button>
  </li>
  <!-- Больше элементов... -->
</ul>

.todo-list {
  display: flex;
  flex-direction: column;  /* Элементы в столбец */
  gap: 0.5rem;
  list-style: none;
}

.todo-item {
  display: flex;
  align-items: center;     /* Выравнивание по центру */
  gap: 1rem;
  padding: 0.5rem;
  background: #f9f9f9;
  border-radius: 4px;
}

.todo-item span {
  flex: 1;                 /* Займет все свободное место */
}

7. Адаптивные макеты (responsive)

.responsive-layout {
  display: flex;
  flex-wrap: wrap;  /* Переносит элементы на новую строку */
  gap: 1rem;
}

.responsive-item {
  flex: 1 1 200px;  /* Минимум 200px, затем равномерное расширение */
}

/* На мобильных - полная ширина */
@media (max-width: 768px) {
  .responsive-item {
    flex: 1 1 100%;   /* На всю ширину */
  }
}

Ключевые свойства Flexbox

/* На контейнере */
.flex-container {
  display: flex;
  
  /* Направление: row (по умолчанию), column, row-reverse, column-reverse */
  flex-direction: row;
  
  /* Переносить ли элементы на новую строку */
  flex-wrap: wrap;
  
  /* Выравнивание по главной оси */
  justify-content: center;  /* flex-start, flex-end, center, space-between, space-around, space-evenly */
  
  /* Выравнивание по побочной оси */
  align-items: center;      /* flex-start, flex-end, center, stretch, baseline */
  
  /* Выравнивание строк (если flex-wrap: wrap) */
  align-content: center;    /* то же, что justify-content */
  
  /* Промежуток между элементами */
  gap: 1rem;                /* или row-gap / column-gap */
}

/* На элементах */
.flex-item {
  /* Увеличение при наличии свободного места */
  flex-grow: 1;
  
  /* Уменьшение при нехватке места */
  flex-shrink: 1;
  
  /* Базовый размер */
  flex-basis: 100px;
  
  /* Краткая запись: flex: grow shrink basis */
  flex: 1 1 100px;
  
  /* Выравнивание отдельного элемента */
  align-self: flex-end;
}

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

Используй Grid вместо Flex когда:

/* ❌ Двумерный макет - лучше Grid */
.grid-layout {
  display: flex;
  flex-wrap: wrap;
  /* Сложно выравнивать столбцы */
}

/* ✅ Правильно - Grid для двумерных макетов */
.grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Практические шпаргалки

Центрирование чего-либо:

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

Максимальное использование пространства:

.expand {
  display: flex;
  flex: 1;
}

Распределение элементов:

.spread {
  display: flex;
  justify-content: space-between;
}

Вертикальный стек с равномерным расширением:

.vstack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.vstack > * {
  flex: 1;
}

Flexbox — это фундаментальный инструмент современного веб-дизайна. Он решает 80% задач раскладки элементов и значительно упрощает создание адаптивных интерфейсов.