Flex-Shrink

Правило для распределения дефицита места. Задается для flex-child

По умолчанию flex-shrink: 1; 


.flex-child {
    flex-basis: 200px;
     /* flex-shrink: 1;  */
}
1
1
1
1
1
1

Пример расчета занимаемого места:


дефицит места = 960px - 6 * 200px = -240px
сумма всех flex-shrink = 1 * 6 = 6
на 1 flex-shrink приходится 240px / 6 = 40px
ширина элемента равна 200px - flex-shrink * 40px
flex-shrink: 1; // 200px - 1 * 40 = 160px

1:2:2


.flex-child {
  flex-basis: 400px;
}
.flex-child:nth-of-type(1) {
  flex-shrink: 1;
}
.flex-child:nth-of-type(2) {
  flex-shrink: 2;
}
.flex-child:nth-of-type(3) {
  flex-shrink: 2;
}
1
2
2

Пример расчета занимаемого места:


дефицит места = 960px - 3 * 400px = -240px
сумма всех flex-shrink = 1 + 2 + 2 = 5
на 1 flex-shrink приходится 240px / 5 = 48px
ширина элемента равна 400px - flex-shrink * 48px
flex-shrink: 1; // 400px - 1 * 48 = 352px
flex-shrink: 2; // 400px - 2 * 48 = 304px

1:4:1


.flex-child {
  flex-basis: 400px;
}
.flex-child:nth-of-type(1) {
  flex-shrink: 1;
}
.flex-child:nth-of-type(2) {
  flex-shrink: 4;
}
.flex-child:nth-of-type(3) {
  flex-shrink: 1;
}
1
4
1

Пример расчета занимаемого места:


дефицит места = 960px - 3 * 400px = -240px
сумма всех flex-shrink = 1 + 4 + 1 = 6
на 1 flex-shrink приходится 240px / 5 = 40px
ширина элемента равна 400px - flex-shrink * 40px
flex-shrink: 1; // 400px - 1 * 40 = 360px
flex-shrink: 2; // 400px - 4 * 40 = 240px

1:2:3:4:5:6


.flex-child {
  flex-basis: 200px;
}
.flex-child:nth-of-type(1) {
  flex-shrink: 1;
}
.flex-child:nth-of-type(2) {
  flex-shrink: 2;
}
.flex-child:nth-of-type(3) {
  flex-shrink: 3;
}
.flex-child:nth-of-type(4) {
  flex-shrink: 4;
}
.flex-child:nth-of-type(5) {
  flex-shrink: 5;
}
.flex-child:nth-of-type(6) {
  flex-shrink: 6;
}
1
2
3
4
5
6

Пример расчета занимаемого места:


дефицит места = 960px - 6 * 200px = -240px
сумма всех flex-shrink = 1 + 2 + 3 + 4 + 5 + 6 = 21
на 1 flex-shrink приходится 240px / 21 = 11.43px
ширина элемента равна 200px - flex-shrink * 11.43px
flex-shrink: 1; // 200px - 1 * 11.43 = 188.57px
flex-shrink: 2; // 200px - 2 * 11.43 = 177.14px
...
flex-shrink: 2; // 200px - 6 * 11.43 = 131.42px
back