Эти три свойства на flex items контролируют, как они делят пространство вдоль главной оси. Сокращение flex их объединяет.
css
.item { : ; }
flex-basis — идеальный/начальный размер элемента вдоль главной оси (как width для строки). auto использует размер содержимого.flex-grow — если есть дополнительное пространство, как жадно расширяется этот элемент. 0 = не расти; большие цифры растут пропорционально.flex-shrink — если недостаточно пространства, как охотно сжимается этот элемент. 0 = никогда не сжимайся (может привести к переполнению); по умолчанию 1 = сжимайся по мере необходимости..a { flex-grow: 1; } /* takes 1 share */
.b { flex-grow: 2; } /* takes 2 shares → twice as much extra space as .a */
Дополнительное пространство разделяется в соотношении значений роста, а не абсолютных размеров.
.item { flex: 1; } /* = 1 1 0 → all items share space EQUALLY (equal widths) */
.item { flex: auto; } /* = 1 1 auto → grow/shrink based on CONTENT size */
.item { flex: none; } /* = 0 0 auto → fixed size, never grow or shrink */
.sidebar { flex: 0 0 250px; } /* fixed 250px sidebar that never flexes */
flex: 1 на каждом элементе создает равные столбцы; flex: 0 0 250px создает жесткую панель фиксированной ширины рядом с гибкой.
.layout { display: flex; }
.sidebar { flex: 0 0 250px; } /* never grows/shrinks — exactly 250px */
.content { flex: 1; } /* takes all remaining space */
Эти свойства — это то, как вы контролируете пропорциональный размер в flex-раскладках — равные столбцы (flex: 1), фиксированные плюс гибкие панели (flex: 0 0 X + flex: 1), и предотвращение нежелательного сжатия (flex-shrink: 0).
Понимание basis/grow/shrink превращает Flexbox из "элементы просто сидят здесь" в точное, чувствительное управление.