Как сочетаются flex-basis flex-grow и flex-shrink?

Question

[beduin01]

Не могу понять как сочетаются следующие теги: flex-basis flex-grow и flex-shrink
С одной стороны flex-basis задает базовые размеры, с другой стороны есть flex-grow который показывает докуда элемент может вырасти, но что получается если flex-basis не совпадает с flex-grow? К примеру есть три контейнера и у центрального flex-grow не совпадает с базовым значением?

И как все это сочетается с min/max-height?

Comments

[Lynn «Кофеман»]

Прочитайте документацию. Не «до куда», а в какой пропорции относительно других flex-grow.

Answer 1

[Полина Емельянова]

СВОЙСТВА!!! flex-basis flex-grow и flex-shrink
flex-basis - это та ширина, будем называть так, которая неотъемлима у элемента. Не хотите ее юзать - используйте min-width.
flex-grow - это "жадность" того или иного элемента. Т.е. сколько свободного пространства он съест, по сравнению с соседом (Спека: Определяет, сколько пространства может занимать флекс внутри контейнера. По дефолту = 0). Вспоминаем ФБоксовский способ прижатия футера к низу:
.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1 0 auto;
}
.footer {
flex: 0 0 auto;
}

и flex-shrink - это то, как будут сжиматься элементы, если места хватать не будет. Антагонист flex-grow. По дефолту = 1, в отличие от flex-grow = 1 (Это ТОЛСТЫЙ намек)
Спека: Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку

Базис задавать НАДО! если желаете адаптивности, при заданном flex-wrap: wrap;
Спека: Свойство flex-basis определяет основу флекса, которая является начальным размером элемента.
ВОПРОСЫ?!
https://webref.ru/css/flex-basis
https://webref.ru/css/flex-grow
https://webref.ru/css/flex-shrink

Нужны ответы? Берете простеньки макетик, а-ля Бутстрап и верстаете весь!!! на флексах. После 5-й верстки наступит Дзен! ИМХО!