Скажем, у нас есть гибкий контейнер шириной 400 пикселей.
Внутри этого контейнера находятся три элемента гибкости:
:nth-child(1) { flex: 0 2 300px; } /* flex-grow, flex-shrink, flex-basis */
:nth-child(2) { flex: 0 1 200px; }
:nth-child(3) { flex: 0 2 100px; }
Таким образом, общая ширина элементов flex составляет 600 пикселей, а свободное пространство в контейнере равно -200px.
С помощью этого вопроса, в этой статье, а flexbox spec, я узнал основную формулу для распределения отрицательного свободного пространства между элементами flex:
Шаг 1
Умножьте каждое значение усадки на его базу и добавьте их все вместе:
:nth-child(1) 2 * 300 = 600
:nth-child(2) 1 * 200 = 200
:nth-child(3) 2 * 100 = 200
TOTAL = 1000
Шаг 2
Разделите каждый элемент выше суммой, чтобы определить коэффициент сжатия:
:nth-child(1) 600 / 1000 = .6
:nth-child(2) 200 / 1000 = .2
:nth-child(3) 200 / 1000 = .2
Шаг 3
Умножьте коэффициент сжатия на отрицательное свободное пространство, чтобы определить пространство, удаленное из каждого элемента:
:nth-child(1) .6 * -200px = -120px
:nth-child(2) .2 * -200px = -40px
:nth-child(3) .2 * -200px = -40px
Итак, вычисленный размер каждого элемента flex должен быть:
:nth-child(1) 300px - 120px = 180px
:nth-child(2) 200px - 40px = 160px
:nth-child(3) 100px - 40px = 60px
Протестировано в Chrome, Firefox и IE11, номера проверяются. Расчет отлично работает.
.flex {
display: flex;
width: 400px;
height: 50px;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.flex li:nth-child(1) {
flex: 0 2 300px;
background: orange;
}
.flex li:nth-child(2) {
flex: 0 1 200px;
background: chartreuse;
}
.flex li:nth-child(3) {
flex: 0 2 100px;
background: aqua;
}<ul class="flex1 flex">
<li>180px</li>
<li>160px</li>
<li>60px</li>
</ul>