Как работает

  • flex-basis: 0; - распределение размера в соответствии с flex-grow
  • flex-basis: auto; - распределение пустого места в соответствии с flex-grow

Если у одного флекс элемента grow 2, а у другого 1, то при flex-basis: auto будет поделено пустое место внутри флекс контейнера. И именно оно будет в два раза больше.

А при flex-basis: 0 размер всего элемента с содержимым будет в два раза больше.

Демо на кодпене

Значения по умолчанию

Изначальное значение (initial) флекс элемента flex: 0 1 auto.

Замечание: Начальные значения flex-grow и flex-basis отличаются от значений по умолчанию, если они опущены в сокращении flex. Это делается для того, чтобы сокращение flex подходило для наиболее популярных задач.

Имеется в виду, что если использовать одно ключевое слово, то он может подставить не initial, а что-то другое. Для удобства. Примеры из спеков далее.

common cases

  • flex: initial

    Эквивалентно flex: 0 1 auto. (Это начальное значение.) Изменяет размер элемента на основе свойств ширины/высоты. (Если свойство основного размера элемента вычисляется автоматически, это приведет к изменению размера элемента flex на основе его содержимого.) Делает флекс элемент негибким при наличии достаточного свободного пространства, но позволяет ему сжиматься до минимального размера при нехватке места. Возможности выравнивания или автоматические отступы можно использовать для выравнивания флекс элементов вдоль главной оси.

  • flex: auto

    Эквивалентно flex: 1 1 auto. Определяет размер элемента на основе свойств ширины/высоты, но делает их полностью гибкими, так что они занимают все свободное пространство вдоль главной оси. Если все элементы имеют либо flex: auto, либо flex: initial, либо flex: none, любое положительное свободное пространство после определения размера элементов будет равномерно распределено между элементами с помощью flex: auto.

  • flex: none

    Эквивалентно flex: 0 0 auto. Это значение определяет размер элемента в соответствии со свойствами ширины/высоты, но делает флекс элемент полностью негибким. Это похоже на initial, за исключением того, что флекс элементам не разрешается сжиматься даже в ситуациях переполнения.

  • flex: <positive-number>

    Эквивалент flex: <положительное число> 1 0. Делает флекс элемент гибким и устанавливает flex basis равным нулю, в результате чего элемент получает указанную долю свободного пространства во флекс контейнере. Если все элементы в контейнере используют этот шаблон, их размеры будут пропорциональны указанному коэффициенту гибкости.

По умолчанию флекс элементы не будут уменьшаться ниже минимального размера содержимого (длина самого длинного слова или элемента фиксированного размера). Чтобы изменить это, установите свойство min-width или min-height. (См. §4.5 Автоматический минимальный размер гибких элементов.)