Flex-Grow

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

По умолчанию flex-grow: 0; 


.flex-child {
    flex-basis: 100px;
     /* flex-grow: 0;  */
}
0
0
0
0
0
0

1:2:2


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

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


свободное место = 960px - 3 * 100px = 660px
сумма всех flex-grow = 1 + 2 + 2 = 5
на 1 flex-grow приходится 660px / 5 = 132px
ширина элемента равна 100px + flex-grow * 132px
flex-grow: 1; // 100px + 1 * 132 = 232px
flex-grow: 2; // 100px + 2 * 132 = 364px

1:4:1

1
4
1

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

свободное место = 960px - 3 * 100px = 660px
сумма всех flex-grow = 1 + 4 + 1 = 6
на 1 flex-grow приходится 660px / 6 = 110px
ширина элемента равна 100px + flex-grow * 110px
flex-grow: 1; // 100px + 1 * 110 = 210px
flex-grow: 4; // 100px + 4 * 110 = 540px

1:2:3:4:5:6

1
2
3
4
5
6

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

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


свободное место = 960px - 6 * 100px = 360px
сумма всех flex-grow = 1 + 2 + 3 + 4 + 5 + 6 = 21
на 1 flex-grow приходится 360px / 21 = 17.14px
ширина элемента равна 100px + flex-grow * 17.14px
flex-grow: 1; // 100px + 1 * 17.14 = 117.14px
flex-grow: 2; // 100px + 2 * 17.14 = 134.28px
...
flex-grow: 6; // 100px + 2 * 17.14 = 202.84px
back