flex-grow CSS

Свойство flex-grow определяет, сколько пространства может занимать флекс внутри контейнера.

В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.

Значение по умолчанию:

0

Наследуется:
Нет
Применяется:

К флекс-элементам

Анимируется:
Да
Спецификации:
Поддержка браузерами:

Can I Use flexbox? Data on support for the flexbox feature across the major browsers from caniuse.com.

Синтаксис

/* <number> values */
flex-grow: 3;
flex-grow: 0.6;

/* Global values */
flex-grow: inherit;
flex-grow: initial;
flex-grow: unset;

Значения

  • <число> — Принимаются целые числа. Отрицательные значения игнорируются.

Примечание

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>