flex-basis 속성

'auto': 아이템의 기본 크기. 아이템의 내용에 맞추어 크기가 조정됨. 만약 아이템의 내용이 없다면 '0'으로 취급됨

'content': 아이템의 내용에 맞추어 크기가 설정됨. 아이템 내부의 내용, padding, border 를 포함하여 계산함. 

'0': 아이템의 크기를 '0'으로 설정함. 이때  'flex-grow'

10rem: 루트 요소(HTML 요소)의 폰트 크기를 기준으로 크기를 지정, 사용자가 웹 페이지에서 설정한 기본 폰트 크기를 따라감

 

body {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

h1 요소의 폰트 크기는 16px*2 = 32px이 된다. 

 

아이템의 내용이 없는 경우 'auto'와 'content'의 크기가 동일