flex

display: flex;

flex 설정 시, 컨테이너 내의 요소들을 가로나 세로 방향으로 유연하게 배치합니다.

inline-flex 설정 시, inline 레벨의 flexBox 생성

flex-direction : 배치 방향
row, row-reverse, column, column-reverse
flex-wrap : 컨테이너 내에서의 줄바꿈
nowrap, wrap, wrap-reverse
flex-direction : Items의 주 축(main-axis)을 설정
row, column, row-reverse, column-reverse
flex-wrap : Items의 여러 줄 묶음(줄 바꿈)을 설정
nowrap, wrap, wrap-reverse
flex-flow : direction, wrap를 한번에 작성
row wrap, row nowrap 등
justify-content : 주 축(main-axis)의 정렬 방법
flex-start, flex-end, center, space-between, space-around
align-content : 교차 축(cross-axis)의 정렬 방법
stretch, flex-start, flex-end, center, space-between, space-around
align-items : 교차 축(cross-axis)에서 item별 정렬 방법
stretch, flex-start, flex-end, center, baseline
gap : item 사이 간격
px, em, cm 등

order : 순서 변겅, 작을수록 먼저
flex-grow : item의 증가 너비 비율 (default : 0)
Container의 너비가 커질 때 item 각각의 너비가 늘어나는 비율을 말합니다.
flex-shrink : item의 감소 너비 비율 (default : 0)
Container의 너비가 작아질 때, item 각각의 너비가 줄어드는 비율을 말합니다.
flex-basis : item의 기본 너비 설정
flex : grow, shrink, basis 순으로 단축 설정
align-self : 교차 축(cross-axis) 정렬 방법 개별 지정

flex를 이용한 수평, 수직 중앙 정렬

상위 엘리먼트의 display: flex 설정 시, algin-items: center는 수직 중앙 정렬, justify-content: center는 수평 중앙 정렬을 구현할 수 있습니다.

width 값을 명시한 후 margin: 0 auto를 통해 수평 중앙 졍렬을 할 수 있습니다.