CSS FLEXBOX

🏷️Flexbox

CSS Flexible Box Layout Module

https://drafts.csswg.org/css-flexbox-1/

display: flex 또는 display: inline-flex를 주면 그 내부의 요소가 flex 영역으로 선언된다.
그 안에 있는 모든 아이템은 flex-item이 된다.

• 부모가 flex이기 때문
• 단, 자식의 자식은 flex-item이 아니다. 직계의 자식까지만 flex가 상속된다.

flex box는 기본적으로 한 줄만 그린다.
flex-line: flex-item을 배치하는 가상의 선 기본이 오른쪽에서 아래축으로 이동한다.
main-axis: flex-line이 진행하는 방향의 축. 기본축
cross-axis: main-axis와 직교하는 축

flex-direction

flex-direction을 이용해 축을 바꾸거나 flex-item이 배치되는 방향을 바꿀 수 있다.

default(기본): 왼쪽->오른쪽, 위->아래
row-reverse: 오른쪽->왼쪽, 아래->위 (그림을 보면 여러줄인 것 같지만 flex-item은 한줄만 커버한다.)
축을 바꾸는 방법

column: 위->아래, 왼쪽->오른쪽 배치 / main 축이 y축이 되고 cross-axis 축이 x축이 된다.
column-reverse: 위->아래, 오른쪽->왼쪽