В прошлом совете я рассказывал о сетке на флексбоксах. Сегодня расскажу о флексбоксах в раскладке выдачи или каталога.
Чтобы управлять размерами элементов внутри флекс-контейнера (элемента с display: flex ), есть три ЦСС-свойства: flex-basis , flex-grow и flex-shrink .
flex-basis
flex-basis определяет начальный размер элемента перед применением к нему flex-grow и flex-shrink . Задаётся в пикселях или процентах.
flex-grow
flex-grow определяет «жадность» элемента: как сильно он увеличивается за счёт свободного места.
-
flex-grow: 1
Один элемент займёт всю доступную ширину контейнера.
-
flex-grow: 1 и flex-grow: 1
Два элемента поделят контейнер пополам.
-
flex-grow: 2 и flex-grow: 1
Два элемента поделят контейнер в соотношении 2:1.
Считайте, что flex-grow задаёт пропорцию, по которой элементы делят контейнер.
flex-shrink
flex-shrink определяет «сжимаемость» элемента: как сильно элемент уменьшается, когда в контейнере не хватает места.
Если ширина контейнера 100 пикселей, а в нём два элемента с flex-basis: 75px ,
то контейнеру не хватит 50 пикселей. Он отнимет недостающие пиксели у флекс-элементов пропорционально: элементы с flex-shrink: 4 и flex-shrink: 1 получат –40 и –10 пикселей.
|