flexbox의 direction 별 주축과 교차축에 따른 너비 영역

• flexbox 는 direction 에 따라서 아래와 같이 너비 영역을 잡는다.

direction: row 일 때

• 주축은 가로방향(row)이 된다.
• 교차축은 세로방향(column)이 된다.
• width:100%은 flex 아이템의 내용 영역 너비를 의미한다.
• 이 때, 아이템에 마진이 들어가면, 마진은 주축 방향으로 적용되어 아이템의 크기에 영향을 준다.

direction: column일 때

• 주축은 세로방향(column)이 된다.
• 교차축은 가로방향(row)이 된다.
• width:100%은 flex 컨테이너의 너비를 의미한다.
• 마진은 주축방향(세로)로 적용되고, 너비(가로)는 교차축 방향이므로 너비는 마진에 의한 영향을 받지 않는다.