Свойствами flex-grow, flex-shrink и flex-basis.
flex-grow: Определяет, насколько элемент может увеличиваться относительно других элементов во flex-контейнере. Значение по умолчанию — 0 (не растягивается).flex-shrink: Определяет, насколько элемент может сжиматься относительно других элементов во flex-контейнере. Значение по умолчанию — 1 (может сжиматься).flex-basis: Задает начальный размер flex-элемента до того, как пространство будет распределено с помощью flex-grow и flex-shrink. Значение по умолчанию — auto (размер зависит от содержимого или явно заданного размера).Их можно использовать по отдельности или в сокращенной записи flex: [<flex-grow>] [<flex-shrink>] [<flex-basis>].
Примеры:
cssТаблица с основными значениями flex:
Значение flex | flex-grow | flex-shrink | flex-basis | Описание |
|---|---|---|---|---|
auto | 1 | 1 | auto | Элемент может растягиваться и сжиматься |
none | 0 | 0 | auto | Элемент не растягивается и не сжимается |
0 <n> <size> | <n> | <n> | <size> | Указанные значения |
<n> | <n> | 1 | 0 | Указанный grow, shrink=1, basis=0 |