Свойство flex

Свойство flex сокращение для flex-basis, flex-shrink и flex-grow.

Применяется к: конкретному flex блоку.

Порядок значения не имеет. Второй и третий параметры (flex-shrink, flex-basis) не обязательны.

Значения

См. соответствующие свойства.

Значение по умолчанию: 0 1 auto.

Пример

Пусть у нас есть 3 элемента. Ширина каждого из них составляет 200px и суммарно равна 600px, что больше ширины родительского контейнера, которая равна 300px. Давайте назначим для первого элемента ширину 200px, для второго элемента - 300px, для третьего элемента - 100px. У всех элементов пусть значение flex-basis будет равно 1, а flex-shrink - 1, 2, 3 в соответствии с порядковым номером элемента:

html<div class="parent">
  <div class="child elem1">1</div>
  <div class="child elem2">2</div>
  <div class="child elem2">3</div>
</div>

css.parent {
  display: flex;
  width: 350px;
  height: 200px;
  border: 1px solid red;
}
.child {
  width: 200px;
  height: 50px;
  border: 1px solid green;
}
.elem1 {
  flex: 200px 1 1;
}
.elem2 {
  flex: 300px 1 2;
}
.elem3 {
  flex: 100px 1 3;
}

Результат:

Смотрите также