Распределение ширины элементов во флекс-контейнере

Одна из проблем, с которой часто сталкиваются разработчики при работе с CSS-свойством display: flex, это распределение ширины внутри флекс-контейнера. Элементы внутри флекс-контейнера зачастую растягиваются на всю ширину контейнера, вместо того чтобы занимать только столько места, сколько требуется для отображения их содержимого.

Приведем пример. Пусть есть контейнер div, у которого установлено свойство display: flex, и внутри него находится дочерний элемент, например, ссылка <a>.

<div class="container">
  <a href="#">Test</a>
</div>

В CSS для контейнера установлены следующие свойства:

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
}

А для дочернего элемента установлено свойство display: inline-flex:

a {
  display: inline-flex;
  padding: 10px 40px;
  background: pink;
}

В итоге, несмотря на display: inline-flex, ссылка занимает всю ширину контейнера, а не ограничивается шириной своего содержимого.

Чтобы решить эту проблему, можно воспользоваться свойством align-items или align-self. Эти свойства определяют, как элементы распределяются вдоль поперечной оси контейнера.

Применим свойство align-items: flex-start к контейнеру:

.container {
  background: red;
  height: 200px;
  flex-direction: column;
  padding: 10px;
  display: flex;
  align-items: flex-start;
}

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

Таким образом, при работе с флекс-контейнерами и их содержимым важно помнить о свойствах align-items и align-self, которые позволяют более гибко управлять распределением пространства внутри контейнера.