Установка фиксированной ширины колонки с помощью CSS Flexbox

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

Проблема

Пусть имеется набор блоков внутри контейнера, для которого установлено свойство display: flex;. Вместе с тем, при попытке задать фиксированную ширину одному из блоков, например, в 25em, с помощью свойства width, возникает проблема: ширина блока не становится фиксированной, а продолжает подстраиваться под размер контейнера.

<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
</div>

.flex-container {
  display: flex;
}

.flex-item {
  width: 25em;
}

Решение

Проблема заключается в том, что свойство flex по умолчанию устанавливается как flex: 0 1 auto;, что означает, что элементы могут сжиматься (flex-shrink: 1;), но не могут расти (flex-grow: 0;), и их базовый размер (flex-basis) равен автоматическому значению — это то значение, которое было установлено с помощью свойства width или height.

Чтобы установить фиксированную ширину элемента, необходимо переопределить это свойство, установив flex: none; или flex: 0 0 auto;. Таким образом, элемент не будет ни сжиматься, ни расти, а его базовый размер будет равен установленному значению width.

.flex-item {
  width: 25em;
  flex: none;
}

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