Flex basis: To control flex item's size

flex item의 initial main size를 결정한다. main size는 axis에 따라서 width또는 height 이다. flex-direction이 row경우 width, column인 경우 height이다.

flex item이 auto가 아닌 flex-basis값을 가지면서 동시에 width 또는 height를 가진다면 flex-basis값이 우선하여 적용한다.

use cases

flex-direction이 row라고 가정, 즉 main size는 width.

flex-basis: auto;

flex item이 가진 width를 적용. flex-basis의 디폴트 값이다.

flex-basis: 200px;

flex item의 width를 200px로 설정.

flex-basis: 20%;

flex item의 width를 flex container의 width의 20%로 적용

flex-basis: content;

flex item의 content에 맞게 width를 자동 설정