Box-model

flexbox는 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 HTML 요소를 배치, 정렬, 분산 할 수 있는 방법을 제공하는 CSS3의 새로운 레이아웃 방식 이다.
flexbox = flex container + flex item 으로 구성
flex container : flex item을 감싸고 있는 부모 요소
flex item : flex container 안에 있는 여러개의 자식 요소

flexitem은 주축(main axix)에 따라 정렬된다. 주축의 방향은 flex container의 flex-direction 속성으로 결정된다. 기본값은 row 이다.
row : 주축의 방향이 왼쪽에서 오른쪽 방향이며, 주축의 방향에 따라 flex item이 정렬된다.
column : 주축의 방향이 위에서 아래 방향이며, 주축의 방향에 따라 flex item이 정렬된다.

flexbox에서 정렬이나 배치에 사용되는 속성은 부모 요소인 flex container 에 지정하는 속성 과 자식 요소인 flex item 에 지정하는 속성으로 나누어진다.
flex container : 전체적인 정렬이나 흐름에 관련된 속성들이 포함됨
- display
- flex-direction : flex container의 주축 방향을 설정. (row, row-reverse, column, column-reverse)
- flex-wrap : flex container 자식 요소인 여러개의 flex item을 한 줄로 또는 여러줄로 배치. (nowrap, wrap, wrap-reverse)
- flex-flow
- justify-content
- align-items
- align-content
- order
flex item : 자식 요소의 크기나 순서에 관련된 속성들이 포함됨
- flex : flex-grow flex-shrink flex-basis 속성의 단축속성. 기본값은 0 1 auto
- flex-grow : flex-item의 너비에 대한 확대인자 지정, 기본값은 0, 음수값은 무효
- flex-shrink : flex-item의 너비에 대한 축소인자 지정, 기본값은 1, 0을 지정하면 축소가 해제
- flex-basis : flex-item의 너비 기본값은 px, % 등의 단위로 지정. 기본값은 auto
- align-self : 설정한 flex-item만(개별적으로) 수직 정렬, 기본값은 auto

flexbox란