flex-grow¶
Свойство flex-grow
определяет, сколько пространства может занимать флекс внутри контейнера.
В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.
Flexbox и выравнивание
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- order
Синтаксис¶
/* <number> values */
flex-grow: 3;
flex-grow: 0.6;
/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;
Значения¶
Значение по-умолчанию: 0
Наследуется: нет
Применяется к флекс-элементам
Анимируется: да
<число>
- Принимаются целые числа. Отрицательные значения игнорируются.
Примечание¶
Safari до версии 9 поддерживает свойство -webkit-flex-grow
.
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>flex-grow</title>
<style>
form {
width: 400px;
margin: auto;
}
p {
display: flex;
}
label {
margin-right: 10px;
}
input,
select {
flex-grow: 1;
}
</style>
</head>
<body>
<form action="handler.php">
<p>
<label>Имя:</label>
<input name="name" id="name" />
</p>
<p>
<label>Какая у вас операционная система?:</label>
<select name="os">
<option value="1">Windows</option>
<option value="2">Linux</option>
<option value="3">Mac OS</option>
</select>
</p>
<p><button>Отправить</button></p>
</form>
</body>
</html>
Результат: