Flexbox в реальных интерфейсах

Flexbox редко используется сам по себе. В реальной верстке он помогает решать конкретные задачи: выровнять элементы, разнести их по краям, занять свободное пространство, прижать блок к нижней части контейнера или разрешить элементам переноситься.

При этом один и тот же интерфейсный паттерн можно реализовать разными способами. Поэтому важно не просто знать свойства Flexbox, а понимать, какую задачу каждое из них решает.

В этой статье разберем несколько небольших приемов, которые постоянно встречаются в интерфейсах.

Прижать элемент к правому краю

Представим небольшую панель:

<div class="toolbar">
  <span>Документы</span>

  <button>Создать</button>
</div>

Нужно, чтобы заголовок находился слева, а кнопка — справа.

Один из вариантов:

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

space-between распределяет свободное пространство между элементами.

Но иногда в интерфейсе нужно прижать к правому краю не последний элемент, а целую группу элементов.

Например:

<div class="toolbar">
  <span>Документы</span>

  <div class="actions">
    <button>Фильтр</button>
    <button>Создать</button>
  </div>
</div>

Здесь можно использовать:

.toolbar {
  display: flex;
}

.actions {
  margin-left: auto;
}

margin-left: auto забирает всё доступное свободное пространство слева от .actions.

В результате группа действий оказывается у правого края.

Когда использовать space-between, а когда margin: auto

Оба варианта могут дать похожий визуальный результат:

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

и:

.toolbar {
  display: flex;
}

.actions {
  margin-left: auto;
}

Но смысл у них разный.

justify-content: space-between распределяет пространство между всеми flex-элементами.

margin-left: auto забирает пространство конкретным элементом или группой.

Элемент занимает оставшееся пространство

Другой распространенный паттерн — когда один элемент должен занять всё доступное пространство между другими.

Например:

<div class="search">
  <button>Назад</button>
  <input type="search" placeholder="Поиск">
  <button>Найти</button>
</div>

Нам не нужно задавать полю конкретную ширину.

Можно позволить ему занять всё оставшееся пространство:

.search {
  display: flex;
  gap: 12px;
}

.search input {
  flex: 1;
}

Теперь поле будет увеличиваться и занимать доступное место между кнопками.

Если контейнер станет шире — поле увеличится.

Если контейнер станет уже — поле уменьшится, пока это позволяют остальные ограничения.

Несколько элементов делят пространство поровну

flex: 1 можно использовать не только для одного элемента.

Например:

<div class="columns">
  <div class="column">Первый</div>
  <div class="column">Второй</div>
  <div class="column">Третий</div>
</div>

.columns {
  display: flex;
  gap: 20px;
}

.column {
  flex: 1;
}

Теперь все три элемента получают одинаковую долю доступного пространства.

Если контейнер станет шире или уже, размеры колонок будут изменяться вместе с ним.

Если одному элементу нужна большая доля:

.column:first-child {
  flex: 2;
}

Теперь первый элемент получит большую часть доступного пространства.

Прижать элемент к низу карточки

Flexbox особенно полезен внутри вертикальных компонентов.

Представим условную карточку:

<article class="card">
  <h2>Название</h2>

  <p>
    Какой-то текст карточки.
  </p>

  <a href="#">Подробнее</a>
</article>

Если у разных карточек разное количество текста, кнопки или ссылки могут оказаться на разной высоте.

Карточку можно превратить во flex-контейнер:

.card {
  display: flex;
  flex-direction: column;
}

А элемент, который нужно прижать к низу, получить:

.card__link {
  margin-top: auto;
}

Автоматический верхний отступ заберет всё свободное вертикальное пространство.

В результате ссылка окажется в нижней части карточки.

Выровнять элементы внутри строки

Flexbox часто нужен не для распределения пространства, а просто для аккуратного выравнивания нескольких элементов.

Например:

<div class="user">
  <img src="avatar.jpg" alt="">
  <span>Иван Иванов</span>
</div>

Можно написать:

.user {
  display: flex;
  align-items: center;
  gap: 12px;
}

Теперь аватар и имя находятся в одной flex-линии и выровнены по поперечной оси.

gap отвечает за расстояние между ними.

При этом не нужно использовать дополнительные margin, относительное позиционирование или другие приемы только ради вертикального выравнивания.

Группа элементов с одинаковым расстоянием

Еще одна типичная задача — расположить несколько элементов рядом с одинаковым расстоянием.

Например:

<div class="actions">
  <button>Изменить</button>
  <button>Удалить</button>
  <button>Отменить</button>
</div>

Вместо:

button {
  margin-right: 12px;
}

можно использовать:

.actions {
  display: flex;
  gap: 12px;
}

Теперь расстояние между элементами контролируется контейнером.

Это особенно удобно, если количество элементов может измениться.

Заключение

Flexbox встречается в самых разных частях интерфейса — от небольших групп кнопок до сложных компонентов.

Главное — не запоминать готовые комбинации свойств, а понимать, как элементы должны располагаться и как между ними должно распределяться пространство. Тогда подходящий инструмент Flexbox обычно находится сам.