Flex-элементы

В прошлом уроке мы настраивали контейнер. Теперь — сами элементы: какой из них растянется на свободное место, какой сожмётся, а какой встанет отдельно от остальных. Эти свойства задают элементам, а не контейнеру.

Растяжение: flex-grow

flex-grow говорит, какую долю свободного места забирает элемент. По умолчанию он равен 0 — элемент не растягивается. Значение 1 отдаёт ему всё оставшееся место:

<style>
  .bar { display: flex; gap: 8px; }
  .bar div { padding: 8px; background: lavender; }
  .grow { flex-grow: 1; }
</style>
 
<div class="bar">
  <div>Логотип</div>
  <div class="grow">Растянут на свободное место</div>
  <div>Войти</div>
</div>

Если у двух элементов flex-grow: 1 и flex-grow: 2, второй получит вдвое больше свободного места.

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

flex-basis — начальный размер элемента вдоль главной оси, до того как flexbox раздаст или отнимет место. Это как width для ряда:

<style>
  .row { display: flex; gap: 8px; }
  .row div { padding: 8px; background: honeydew; }
  .side { flex-basis: 120px; }
</style>
 
<div class="row">
  <div class="side">120px</div>
  <div>По содержимому</div>
</div>

Сокращение flex

Три свойства обычно пишут одной строкой flex: рост, сжатие и базовый размер. Самая частая запись — flex: 1: элементы делят ширину поровну, независимо от длины текста:

<style>
  .cols { display: flex; gap: 8px; }
  .cols div { flex: 1; padding: 8px; background: lightskyblue; }
</style>
 
<div class="cols">
  <div>Коротко</div>
  <div>Здесь текст намного длиннее</div>
  <div>Средний</div>
</div>

Запись	Смысл
`flex: 1`	Растягиваться, базовый размер 0 — равные доли
`flex: auto`	Растягиваться от размера по содержимому
`flex: none`	Не растягиваться и не сжиматься

Отдельное выравнивание

align-self выравнивает один элемент поперёк оси, не трогая остальных. order меняет порядок показа без правки HTML:

<style>
  .row { display: flex; gap: 8px; height: 90px; background: whitesmoke; }
  .row div { padding: 8px; background: gold; }
  .bottom { align-self: flex-end; }
  .first { order: -1; background: tomato; }
</style>
 
<div class="row">
  <div>Один</div>
  <div class="bottom">Прижат вниз</div>
  <div class="first">Стоит первым</div>
</div>

order меняет только картинку: клавиатура и программы чтения с экрана идут по порядку в HTML. Пользуйтесь им осторожно.

Отодвинуть вправо

Внешний отступ margin-left: auto во flexbox забирает всё свободное место слева от элемента. Так кнопки уводят к правому краю шапки:

<style>
  .header { display: flex; gap: 12px; padding: 8px; background: lavender; }
  .login { margin-left: auto; }
</style>
 
<nav class="header">
  <a href="#">Главная</a>
  <a href="#">Блог</a>
  <a href="#" class="login">Войти</a>
</nav>

Частая ошибка

Когда места не хватает, flexbox сжимает все элементы — даже те, у которых задана ширина. Аватар превращается в овал. flex-shrink: 0 запрещает элементу сжиматься:

<style>
  .msg { display: flex; gap: 8px; width: 240px; margin-bottom: 8px; }
  .avatar { width: 48px; height: 48px; border-radius: 50%; background: coral; }
  .fixed { flex-shrink: 0; }
</style>
 
<div class="msg">
  <div class="avatar"></div>
  <p>Очень длинное сообщение, которое не помещается в одну строку.</p>
</div>
<div class="msg">
  <div class="avatar fixed"></div>
  <p>Очень длинное сообщение, которое не помещается в одну строку.</p>
</div>

Верхний кружок сплющился, нижний сохранил размер.

Спасибо, что читаете!