컨텐츠 정렬 FLEX

FLEX란?

컨텐츠를 좌우 혹은 위아래로 정렬할때 사용하는 css속성이다.

좌우배치

컨텐츠를 좌우 배치할때 사용하는 css속성이다.

flex-direction은 좌우배치 방향을 설정할때 쓰는 속성이다.

row : 왼쪽정렬
row-reverse : 오른쪽 정렬이지만 오른쪽 끝부터 1번이 시작한다.

justify-content는 좌우 정렬이지만 더 다양한 기능을 쓸수있다.

flex-start : 왼쪽정렬
flex-end : row-reverse랑 같아 보이지만 flex-end는 컨텐츠를 그대로 오른쪽 정렬한다.
center : 중간정렬
space-between : 컨텐츠 사이에 똑같은 간격을 만들어 준다.
space-around : 컨텐츠의 둘레에 똑같은 간격을 만들어 준다.
space-evenly : 컨텐츠 사이와 양끝에 똑같은 간격을 만들어 준다.

수직축 정렬

컨텐츠를 수직축을 기준으로 정렬할때 사용하는 css속성이다.

flex-start : 위를 기준으로 정렬
flex-end : 밑을 기준으로 정렬
center : 중앙정렬

위아래 정렬

컨텐츠를 위아래 정렬할때 사용하는 css속성

column : 위를 기준으로 정렬
coloumn : 아래를 기준으로 정렬 다만 밑에가 4번부터 시작한다.