display가 block인 태그들의 배치를 쉽게하는 방법

css3에 레이아웃 배치를 쉽게 하기 위한 방법이 고안됐다. 

바로 flex이다. 이것은 div같은 display가 block인 태그들을 쉽게 배치할 수 있도록 도와준다.

필요한 것은 flex를 해줄 컨테이너(부모)와 그 컨테이너에 속하는 item(자식)들이다. 

 

원래 display가 block이면 가로칸을 차지해서 줄띄기가 되는데 컨테이너를 flex로 설정해주게 되면 

flex item들이 수평으로 정렬된다. 

 

# flex-direction

item을 수평정렬할 것인지, 수직정렬할 것인지 결정하는 css이다.

flex-direction : row;

flex-direction : row-reverse;

flex-direction : column;

flex-direction : column-reverse;

가 존재한다.

 

# flex-wrap

브라우저 사이즈에 따라 item을 줄바꿈할 것인지 결정하는 css이다.

시작점은 flex-direction 속성값에 의해 결정된다.

flex-wrap : nowrap; 기본값으로 줄 바꿈을 하지 않고 모든 아이템을 한 줄에 표시한다.

flex-wrap : wrap; 브라우저 사이즈가 줄어들면 자동으로 여러 줄을 표시한다.

flex-wrap : wrap-reverse; 사이즈가 줄면 역방향으로 여러 줄을 표시한다.

 

# justify-content

가장 잘 쓰이는 거라고 생각이 든다.

수평축의 정렬 방법을 설정하는 css이다. 이걸 통해 item들의 정렬을 정할 수 있다.

justify-content : flex-start;   아이템을 시작점으로 정렬

justify-content : flex-end;    아이템을 끝점으로 정렬

justify-content : center;  아이템을 가운데로 정렬

justify-content : space-between;  

 

# align-content 

아이템이 두 줄 이상일 때 수직축의 정렬을 설정하는 css이다.

align-content : stretch;   기본값이고 아이템 높이를 늘려 위아래로 가득 채운다.

align-content : flex-start; 시작점으로 정렬

align-content : flex-end;  끝점으로 정렬

align-content : center;  가운데로 정렬한다.