flex에 대한 기본적인 것은 Block 요소와 같이 수직으로 쌓이는 요소들을 수평으로 쌓이도록 해주는 역할을 한다.
왜냐하면 기본값이 flex-direction 이 row로 되어 있기 때문이다.
flex는 grid 처럼 여러 행과 열을 처리하는 것과는 달리 하나의 행 또는 열을 한 컨테이너로 하여 그 안의 항목을 쌓아주는 형태이다.
flex-direction 은 row와 column 두 부분으로 쌓을 수 있고
start 시작 부분과 end 끝부분으로 쌓인다. 일반적으로 영어는 왼쪽에서 오른쪽으로 쌓인다고 볼 수 있다.
아무튼 flex에서 가장 헷갈리는 부분은 flex-grow / flex-basis / flex-shrink 이다.
flex의 기본값을 정리하면 앞서 말한 flex-direction 은 row (수평 쌓임)이고 inline-flex 라고 봐도 된다.
당연히 inline-flex는 수평으로 fix 되므로 direction 속성값은 변경이 불가하다. 그냥 flex는 변경가능하다.
그리고, flex-grow = 0, flex-basis = auto, flex-shrink = 1 이다.
flex-grow는 display=flex; 로 flex컨테이너가 설정되면 그 컨테이너 안의 flex 항목들의 grow 속성값 비율에 따라
flex-basis 속성 너비값을 제외한 "나머지" 부분을 비율에 따라 분배받아 각 flex 항목에 포함된다.
flex-basis는 속성 너비값을 포함하면
