В каких обстоятельствах гибкая усадка применяется к гибким элементам и как она работает?

Я играл с этой приятной демонстрационной страницей CSS Flexbox, и я понимаю большинство концепций, однако я не смог увидеть flex-shrink в работе, Какие бы настройки я ни применял там, я не вижу разницы на странице.

Из spec:

< "прогибается вырастали >

Этот компонент устанавливает" flex-grow longhand "и указывает flex, который определяет, сколько будет расти элемент гибкости по отношению к остальным элементам гибкости в гибком контейнере, когда положительное свободное пространство. Когда опущено, оно установлено в '1.

<" прогибается термоусадочные >

Этот компонент устанавливает "flex-shrink longhand" и указывает flex, который определяет, насколько гибкий элемент будет усадка относительно остальной части гибких элементов в гибком контейнере когда отрицательное свободное пространство распределяется. Когда он опущен, он установлен на "1. Коэффициент усадки гибки умножается на гибкую основу, когда распределяя отрицательное пространство.

В каких обстоятельствах будет применяться flex-shrink (т.е. при распределении отрицательного пространства)? Я пробовал пользовательскую страницу с настройкой ширины в элементе Flexbox и (min-) ширины элементов внутри него, чтобы сделать переполнение, но, похоже, это не описанный случай.

Он уже поддерживается?

В качестве решения будет оценен либо набор параметров в связанной демонстрационной версии, либо демонстрация JSFiddle-live.

Ответы

Ответ 1

Чтобы увидеть flex-shrink в действии, вы должны иметь возможность сделать свой контейнер меньше.

HTML:

<div class="container">
  <div class="child one">
    Child One
  </div>

  <div class="child two">
    Child Two
  </div>
</div>

CSS

div {
  border: 1px solid;
}

.container {
  display: flex;
}

.child.one {
  flex: 1 1 10em;
  color: green;
}

.child.two {
  flex: 2 2 10em;
  color: purple;
}

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

Текущая поддержка flexbox: Opera (без префикса), Chrome (с префиксом), IE10 (с префиксом, но использует несколько разные имена/значения свойств). В настоящее время Firefox использует старую спецификацию с 2009 года (префикс), но новая спецификация должна быть доступна в экспериментальных сборках прямо сейчас (без префикса).