Как позиционировать элементы с помощью display: flex?

Позиционирование элементов с помощью display: flex

Flexbox - это самый мощный и популярный способ позиционирования элементов в современном CSS. Он делает работу с раскладками простой и интуитивной.

1. Основные концепции

Контейнер (Container) и элементы (Items)

.flex-container {
  display: flex;
  /* Все прямые дети становятся flex-items */
}

.flex-container > div {
  /* Это flex-items */
}

Цепочка:

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

2. Свойства контейнера

flex-direction - направление

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

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

/* Вертикально сверху вниз */
.container { flex-direction: column; }

/* Вертикально снизу вверх */
.container { flex-direction: column-reverse; }

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

.container {
  display: flex;
  justify-content: flex-start;    /* Слева (по умолчанию) */
}

.container {
  justify-content: flex-end;      /* Справа */
}

.container {
  justify-content: center;        /* По центру */
}

.container {
  justify-content: space-between; /* Расстояние между элементами */
}

.container {
  justify-content: space-around;  /* Расстояние вокруг элементов */
}

.container {
  justify-content: space-evenly;  /* Равномерное расстояние */
}

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

.container {
  display: flex;
  height: 200px; /* Важно для видимости */
  align-items: flex-start;    /* Вверху */
}

.container {
  align-items: flex-end;      /* Внизу */
}

.container {
  align-items: center;        /* По центру */
}

.container {
  align-items: stretch;       /* На всю высоту (по умолчанию) */
}

.container {
  align-items: baseline;      /* По базовой линии текста */
}

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

Центрирование элемента

Это самая популярная задача:

<div class="container">
  <div class="box">Центрированный элемент</div>
</div>

.container {
  display: flex;
  height: 300px;
  justify-content: center;  /* Горизонтально */
  align-items: center;      /* Вертикально */
}

Заголовок с логотипом

<header class="header">
  <div class="logo">Logo</div>
  <nav class="nav">Nav</nav>
  <div class="user">User</div>
</header>

.header {
  display: flex;
  justify-content: space-between;  /* Логотип слева, User справа */
  align-items: center;
  padding: 16px;
}

Карточка с иконкой и текстом

<div class="card">
  <img class="icon" src="icon.svg" />
  <div class="content">
    <h3>Заголовок</h3>
    <p>Описание</p>
  </div>
</div>

.card {
  display: flex;
  gap: 16px;          /* Расстояние между элементами */
  align-items: center;
}

.icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;     /* Не сжимать иконку */
}

4. Свойства flex-items

flex - универсальное свойство

Комбинирует flex-grow, flex-shrink, flex-basis:

.item {
  /* flex: grow shrink basis */
  flex: 1;            /* 1 1 0% - заполнить доступное пространство поровну */
  flex: 1 1 200px;    /* Расти, сжиматься, базовая ширина 200px */
}

flex-grow - растяние

.item1 { flex-grow: 1; }  /* Берет 1 единицу свободного места */
.item2 { flex-grow: 2; }  /* Берет 2 единицы (в 2 раза больше) */
.item3 { flex-grow: 1; }  /* Берет 1 единицу */

flex-shrink - сжатие

.item {
  flex-shrink: 1;     /* Может сжиматься (по умолчанию) */
  flex-shrink: 0;     /* Не сжимается */
}

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

.item {
  flex-basis: auto;    /* По умолчанию - размер контента */
  flex-basis: 200px;   /* Фиксированный размер */
  flex-basis: 50%;     /* Процент от родителя */
}

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

.container {
  display: flex;
  gap: 16px;           /* Расстояние между всеми элементами */
  row-gap: 8px;        /* Между строками (для column) */
  column-gap: 16px;    /* Между колонками (для row) */
}

6. wrap - перенос на новую строку

.container {
  display: flex;
  flex-wrap: nowrap;    /* Не переносить (по умолчанию) */
}

.container {
  flex-wrap: wrap;      /* Переносить на новую строку */
}

.container {
  flex-wrap: wrap-reverse; /* Переносить в обратном направлении */
}

Пример: сетка элементов

<div class="grid">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

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

.card {
  flex: 1 1 300px;  /* Минимум 300px, растет, сжимается */
}

7. align-content - выравнивание строк

Когда элементы переносятся на несколько строк:

.container {
  display: flex;
  flex-wrap: wrap;
  height: 400px;
  align-content: flex-start;    /* К началу */
  align-content: center;        /* По центру */
  align-content: space-between; /* С расстоянием */
}

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

.item {
  align-self: flex-start;  /* Переопределить выравнивание для одного элемента */
  align-self: center;
  align-self: flex-end;
}

Пример: элемент выше остальных

<div class="container">
  <div class="item">Normal</div>
  <div class="item special">Special</div>
  <div class="item">Normal</div>
</div>

.container {
  display: flex;
  align-items: center;
}

.special {
  align-self: flex-start;  /* Этот элемент вверху */
}

9. order - порядок элементов

.item {
  order: 1;  /* По умолчанию все 0, сортируется по возрастанию */
}

.item:first-child {
  order: 3;  /* Будет третьим */
}

.item:last-child {
  order: 1;  /* Будет первым */
}

10. Полный практический пример

<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">
    <header class="header">Header</header>
    <div class="posts">
      <article class="post">Post 1</article>
      <article class="post">Post 2</article>
    </div>
  </main>
  <aside class="sidebar-right">Right</aside>
</div>

/* Основная раскладка */
.layout {
  display: flex;
  gap: 20px;
  min-height: 100vh;
}

.sidebar {
  width: 200px;
  flex-shrink: 0;  /* Не сжимается */
}

.content {
  flex: 1;  /* Занимает оставшееся место */
  display: flex;
  flex-direction: column;
}

.header {
  padding: 20px;
  flex-shrink: 0;
}

.posts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.post {
  padding: 16px;
  border: 1px solid #ccc;
}

@media (max-width: 768px) {
  .layout {
    flex-direction: column;  /* На мобильных - вертикально */
  }
  
  .sidebar {
    width: auto;  /* На всю ширину */
  }
}

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

/* ПЛОХО - забыли height */
.container {
  display: flex;
  align-items: center;  /* Не видно, т.к. высота контейнера = высота контента */
}

/* ХОРОШО */
.container {
  display: flex;
  align-items: center;
  height: 200px;  /* Явно указать высоту */
}

/* ПЛОХО - margin: auto не работает как ожидается */
.container > div {
  margin: auto;  /* Работает, но не очень понятно */
}

/* ХОРОШО */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Шпаргалка

Flexbox - это мощный инструмент, который решает 90% задач позиционирования на современном веб-сайте. Grid используется для более сложных двумерных раскладок, но для большинства случаев Flexbox достаточно.