[CSS] flexbox

flexbox란?

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

flexbox를 flex 컨테이너라고도 한다.(요소들을 포함하기 때문)

flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 한다.

 

flexbox에는 주축(main-axis)과 교차축(cross-axis)이 있다.

---

flex-direction 속성

flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.

- row : 기본값. 주축은 행이고 방향은 콘텐츠의 방향과 동일

- row-reverse : 주축은 행이고 방향은 콘텐츠의 방향과 반대

- column : 주축은 열이고 방향은 콘텐츠의 방향과 동일

- column-reverse : 주축은 열이고 방향은 콘텐츠의 방향과 반대

row

row-reverse

column

column-reverse

---

justify-content 속성 (주축 배치 방법)

center

flex-start

flex-end

space-around

space-between

align-items 속성 (교차축 배치 방법)

flex-end

flex-start

center

align-self 속성 (교차축 개별 요소 배치 방법)

1번 박스 center

flex-wrap 속성 (줄 바꿈 여부)

nowrap

wrap