flexbox

flexbox란, 박스 내 요소 간의 공간 배분 / 정렬 기능을 제공하기 위한 1차원 layout 모델이다.
1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원 (행 또는 열)을 다룬다는 특성 때문이다.

flexbox 만들기

flexbox를 flex container 라고도 한다.
flex container를 만들기 위해서는 컨테이너의 속성에
display : flex;
를 적용하면 된다. 기본적으로 행으로 정렬된다.

flexbox의 축

• 주축 main-axis : flexbox item들이 정렬되는 방향의 축
• 교차축 cross-axis : 주축의 수직 축

flex-direction : 주축과 방향

flexbox내 주축 및 방향을 지정

• row(-reverse) : 주축을 행(좌우)축으로
• column(-reverse) : 주축을 열(위아래)축으로

justify-content : 주축 배치

주축을 기준으로 아이템들을 어디에 배치할 지 결정
(flex-start, flex-end, center, space-around, space-between..)

align-items : 교차축 배치

교차축을 기준으로 아이템들을 어디에 배치할 지 결정
(flex-end, flex-end, center, .. )

align-self : 교차축 개별요소 배치

flex-wrap: 줄 바꿈 여부

주축 상에 존재하는 item들의 크기 합이 주축의 크기보다 커지면, 두 행이상으로 처리