Flex

Краткая запись для flex-grow, flex-shrink и flex-basis

Порядок объявления flex: grow shrink basis;

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

flex: 2 1 10%;


.flex-child { 
  flex: 2 1 10%; // grow shrink basis
}
2
2
2
2
2
2

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


basis = 10% = 960px / 10 = 96px;
свободное место = 960px - 6 * 96px = 384px      
сумма всех flex-grow = 2 * 6 = 12
на 1 flex-grow приходится 384px / 12 = 32px
ширина элемента равна 96px + flex-grow * 32px
flex-grow: 2; // 96px + 2 * 32 = 160px
back