-
Главная
-
CSS
-
Свойство flex-grow
← Перейти к списку свойств
Свойство flex-grow
определяет, насколько флекс-элемент будет растягиваться, в сравнении с другими флекс-элементами.
Поддержка браузеров
Синтаксис
flex-grow: число|initial|inherit
Значения свойства
Значение |
Описание |
число |
Число, котрое определяет, насколько флекс-элемент будет растягиваться, в сравнении с другими флекс-элементами. Значение по умолчанию 0. |
initial |
Устанавливает значение по умолчанию. |
inherit |
Унаследует значение свойства от родительского элемента. |
Песочница
Код в песочнице можно редактировать и видеть результат в реальном времени:
<div class="flex">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
HTML
.flex {
display: flex;
border: 1px solid #ddd;
}
.item {
height: 120px;
width: 120px;
flex-grow: 1;
}
.item:nth-child(1) {
background: yellow
}
.item:nth-child(2) {
background: blue;
flex-grow: 3;
}
.item:nth-child(3) {
background: beige
}
CSS
← Перейти к списку свойств