1. Главная
2. CSS
3. Свойство align-items

СВОЙСТВО FLEX-SHRINK

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

Поддержка браузеров

Синтаксис

flex-shrink: число|initial|inherit

Значения свойства

Песочница

Код в песочнице можно редактировать и видеть результат в реальном времени:

<div class="flex">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

.flex {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

.item:nth-child(1) {
    background: yellow
}

.item:nth-child(2) {
  background: blue;
  flex-shrink: 3
}

.item:nth-child(3) {
    background: beige
}

.item:nth-child(4) {
    background: gray
}

.item:nth-child(5) {
    background: coral
}