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

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

И как все это сочетается с min/max-height?
  • Вопрос задан
  • 3976 просмотров
Решения вопроса 1
bugo_aneo
@bugo_aneo
Верстальщик по жизни, йог, буддист, кофеман
СВОЙСТВА!!! 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-й верстки наступит Дзен! ИМХО!
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
maxminimus
@maxminimus
просто или ничего
не надо использовать flex-basis - это лишнее избыточное средство
достаточно обычных цсс-размеров - min/max-height и тд

flex-grow и flex-shrink - это степень сжимаемости и расширяемости элементов
поэтому флексбокс это гибкий блок - изначальные размеры становятся гибкими
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
11 авг. 2020, в 16:58
3000 руб./за проект
11 авг. 2020, в 16:48
15000 руб./за проект
11 авг. 2020, в 16:48
1000 руб./за проект