CSS flex 기본

flex로 css를 작업할 때 항상 유의해야 하는 것이 바로 축이다.
축은 결국 방향을 가리키는데 화살표로 기억하면 쉽다. 이 화살표는 flex-direction으로 설정할 수 있다.

 

flex-direction: row | row-reverse | column | column-reverse

 

row: 아이템을 → 방향으로 배치 (기본값)
row-reverse: 아이템을 ← 방향으로 배치
column: 아이템을 ↓ 방향으로 배치
column-reverse: 아이템을 ↑ 방향으로 배치

 

이 화살표 방향을 따라 내부 아이템들을 배치시킨다. 내부 아이템의 속성이 많은데 괄호 안의 화살표를 기반으로 동작하기 때문에 이 방향을 확실히 인지하고 있어야 한다.

 

먼저 justify-content는 flex-direction으로 설정한 화살표를 따라서 아이템을 정렬한다.

 

justify-content: flex-start | flex-end | center | space-between | space-around

 

flex-start: 화살표를 따라 시작 부분에 정렬 (기본값)
flex-end: 화살표를 따라 마지막 부분에 정렬
center: 화살표 중간에 정렬
space-between: 아이템 사이를 동일한 간격으로 정렬, 처음과 마지막 아이템은 화살표 가장자리에 위치
space-around: 아이템 사이를 동일한 간격으로 정렬, 처음과 마지막 아이템도 화살표 가장자리와 떨어짐

 

화살표라 표현했지만 실제 레이아웃은 1차원은 아니기 때문에 화살표와 수직 방향으로도 정렬이 필요하다.
align-items으로 화살표와 수직 방향으로 정렬한다.

 

align-items: stretch | center | flex-start | flex-end | baseline

 

stretch: 화살표 수직 방향으로 늘림 (기본값)

 

이렇게 화살표 방향을 설정하고, 화살표 방향과 수직 방향 모두 정렬할 수 있지만 화살표가 여러 개 있을 때는 어떻게 할지 정의하지 않았다.

당연한 얘기지만 화살표를 따라 아이템을 배치하다가 공간이 모자라면 다음 줄/ 다음 열로 넘어갈 수 있다. 물론 설정 값에 따라 공간이 모자라도 무시하고 그릴 수도 있다.

 

flx-wrap로 하나의 화살표에 아이템을 배치하다가 공간이 없을 때 어떻게 처리할지 정의한다.

 

flex-wrap: nowrap | wrap | wrap-reverse

 

nowrap: 공간이 모자라도 화살표를 따라 계속 배치 (기본값)
wrap: 공간이 모자라면 다음 화살표로 배치

 

flex-direction와 마찬가지로 flex-wrap도 화살표를 정의하는 속성이다. 이 공통적인 두 속성을 합친 속성으로 flex-flow가 있고, 단순히 flex-direction, flex-wrap 값을 한 칸 띄어 적어주면 된다.

 

다시 화살표가 여러 개 있을 수 있으니 화살표 사이의 정렬을 하는 속성도 필요하다.

이건 align-content로 정렬한다.

 

align-content: stretch | center | flex-start | flex-end | space-between | space-around

 

화살표 사이의 정렬에 대한 속성이기 때문에 화살표가 한 개밖에 없다면 의미 없다.