Свойство CSS flex-grow
Свойство flex-grow определяет, насколько элемент будет растягиваться. Узнайте значения и примеры.
Свойство flex-grow управляет тем, насколько flex-элемент растягивается, заполняя свободное пространство внутри flex-контейнера. Значение является безразмерным коэффициентом роста, а не длиной: оно отвечает на вопрос «когда есть дополнительное место, какую его долю должен занять этот элемент?»
Когда у каждого элемента есть коэффициент flex-grow, оставшееся пространство делится пропорционально этим коэффициентам. Основной размер flex-элемента — это либо его ширина, либо высота, в зависимости от flex-direction: в строке элементы растут горизонтально, в столбце — вертикально.
Это свойство является одним из свойств CSS3. Оно обычно используется вместе с flex-shrink (как элементы сжимаются при нехватке места) и flex-basis (их начальный размер), и все три, как правило, задаются одновременно через сокращённое свойство flex.
Как распределяется свободное пространство
Алгоритм Flexbox работает в два этапа:
- Размещает каждый элемент по его
flex-basis(или по размеру содержимого, еслиflex-basis: auto). - Измеряет свободное пространство — основной размер контейнера минус сумма базовых размеров — и распределяет его пропорционально коэффициенту
flex-growкаждого элемента.
Если элементы начинают с нулевой ширины, а контейнер имеет, скажем, 600px свободного пространства при коэффициентах 1, 2, 1, 1, 1 (сумма 6), каждая единица стоит 600 / 6 = 100px. Таким образом, элемент с коэффициентом 2 получает 200px роста, а каждый элемент с коэффициентом 1 — 100px. Удвоение коэффициента удваивает долю дополнительного пространства — это не делает элемент вдвое шире в целом.
flex-grow действует только при наличии свободного пространства и когда элементы являются настоящими flex-элементами (родитель имеет display: flex или display: inline-flex). При отсутствии свободного пространства или flex-элементов это свойство не оказывает никакого эффекта.
| Начальное значение | 0 |
|---|---|
| Применяется к | Flex-элементам, включая псевдоэлементы в потоке. |
| Наследуется | Нет. |
| Анимируется | Да. Элементы поддерживают анимацию. |
| Версия | CSS3 |
| DOM Синтаксис | object.style.flexGrow = 3; |
Синтаксис
Синтаксис свойства CSS flex-grow
flex-grow: number | initial | inherit;Пример свойства flex-grow:
Пример свойства CSS flex-grow со значением number
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 2;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Результат
Пример свойства flex-grow с более высоким коэффициентом роста:
Свойство CSS flex-grow с числовым значением
<!DOCTYPE html>
<html>
<head>
<title>The title of the document</title>
<style>
.box {
width: 320px;
height: 120px;
border: 2px solid #cccccc;
display: flex;
}
.box div:nth-of-type(1) {
flex-grow: 1;
}
.box div:nth-of-type(2) {
flex-grow: 6;
}
.box div:nth-of-type(3) {
flex-grow: 1;
}
.box div:nth-of-type(4) {
flex-grow: 1;
}
.box div:nth-of-type(5) {
flex-grow: 1;
}
</style>
</head>
<body>
<h2>Flex-grow property example</h2>
<div class="box">
<div style="background-color: #eeeeee;"></div>
<div style="background-color: #1c87c9;"></div>
<div style="background-color: #8ebf42;"></div>
<div style="background-color: #cccccc;"></div>
<div style="background-color: #666666;"></div>
</div>
</body>
</html>Использование flex-grow внутри сокращённого свойства flex
Свойство flex-grow редко записывается отдельно. Наиболее распространённый шаблон — flex: 1, что является сокращением для flex-grow: 1; flex-shrink: 1; flex-basis: 0. Установка базового размера в 0 указывает браузеру игнорировать размер содержимого и делить весь контейнер пропорционально, поэтому несколько элементов с flex: 1 получают одинаковую ширину:
.item {
flex: 1; /* grow:1 shrink:1 basis:0 → equal columns */
}Чтобы один элемент занимал вдвое большую долю по сравнению с остальными, увеличьте его коэффициент роста:
.sidebar { flex: 1; }
.main { flex: 2; } /* gets 2/3 of the space, sidebar gets 1/3 */Частые ошибки
- Коэффициент, а не ширина.
flex-grow: 2не означает «вдвое шире» — это означает «двойная доля оставшегося пространства». Когда элементы имеют разный размер содержимого, итоговая ширина не будет точным соотношением 2:1, если толькоflex-basisне равен0. - Отрицательные значения недопустимы. Они игнорируются, и свойство сохраняет предыдущее значение.
- Нет свободного пространства — нет эффекта. Если элементы уже заполняют (или переполняют) контейнер,
flex-growничего не меняет — в этом случае используется flex-shrink. - Коэффициент не имеет единиц. Не пишите
flex-grow: 2px— это недопустимое значение.
Значения
| Значение | Описание | Пример |
|---|---|---|
| number | Определяет, насколько элемент будет расти относительно остальных гибких элементов того же контейнера. Значение по умолчанию — 0. | Попробовать » |
| initial | Устанавливает свойство в значение по умолчанию. | Попробовать » |
| inherit | Наследует это свойство от родительского элемента. |