Равномерное распределение ширины элементов с использованием Flexbox

Станьте веб-разработчиком с нуля за 15 месяцев на курсе онлайн-университета Skypro. Преподаватели — практикующие эксперты из VK, «Альфа-Банка», Skyeng и других крупных компаний. В программе нет лишней теории, зато много практических заданий, а результаты курсовых можно положить в портфолио. Специалисты центра карьеры помогут с резюме, сопроводительными письмами и собеседованиями.

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

Возьмем для примера навигационную панель, состоящую из четырех элементов:

<div class="navbar">
  <div>Главная</div>
  <div>О нас</div>
  <div>Продукты</div>
  <div>Контакты</div>
</div>

Используется следующий CSS-код:

.navbar {
  display: flex;
}

.navbar div {
  flex-grow: 1;
  border: 1px solid black;
}

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

Проблема состоит в том, что свойство flex-grow работает иначе, чем можно было бы ожидать. По умолчанию, значение flex-grow равно 0, что означает, что элемент не будет расти за пределы своей начальной ширины. Когда устанавливается flex-grow: 1, элемент получает возможность расти и занимать доступное пространство в контейнере.

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

Следовательно, чтобы гарантировать, что все элементы получат одинаковую ширину, необходимо установить для них одинаковую начальную ширину. Это можно сделать с помощью свойств width или flex-basis.

.navbar div {
  flex-grow: 1;
  flex-basis: 0;
  border: 1px solid black;
}

В этом примере свойство flex-basis: 0 устанавливает начальную ширину каждого элемента равной 0, что позволяет свойству flex-grow: 1 равномерно распределить свободное пространство между элементами.

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

На курсе Skypro «Веб-разработчик» освоите JavaScript, GitHub, Tilda, Postman, HTML, CSS и другие программы и инструменты, научитесь решать реальные задачи разработчика и работать в команде. Все учебные проекты можно положить в портфолио и устроиться на работу по новой специальности еще в процессе обучения.