flex속성?

<목차>

1. flex속성이란?

2. 정렬 기준

3. 정렬 방법

1. flex속성이란?

flex속성이란 특정 블록 내 자식 노드들을 정렬하기 위한 방법이다. 기본적으로 가로로 배치가 되며 블록형 태그와 인라인 태그를 구분하지 않는다. 원래 블록 속성을 가진 태그는 하나의 라인을 모두 차지하기 때문에 속성을 inline으로 직접 바꿔주지 않는 한 바로 옆에 붙을 수 없다.

하지만 위 이미지와 같이 flex로 설정되 블록의 자식 노드는 모두 블록, 인라인 할 것 없이 가로로 바로 옆에 위치하게 된다.

2.정렬 기준

우리가 물건을 세우는 것과 같이 어떤 것을 정렬한다고 하면 무조건 가로로만 배치하는 것이 아니다. 때에 따라 가로로, 다른 경우에는 세로를 기준으로 줄을 세우게 된다. flex 속성도 마찬가지로 기준을 설정하여 정렬을 할 수 있다. "flex-direction:정렬기준" 으로 기준을 바꿀 수 있다.

1) row

- flex를 사용했을 때 기본적으로 설정되어 있는 기준이며 자식 요소가 왼쪽을 시작으로 가로로 배치된다.

2) column

- 자식 요소들 정렬 기준이 왼쪽을 기준으로 세로로 배치된다.

3) row-reverse

- row와 같이 가로축으로 정렬되지만 위치는 정반대인 오른쪽에서 시작한다

4) column-reverse

- column과 같이 세로축으로 정렬되지만 위치는 정반대인 오른쪽에서 시작한다

3. 정렬 방법

위에서 정렬 기준을 설정하는 방법을 알아보았다. 하지만 기준을 설정한 것만으로는 정렬되었다고는 말하기 힘들다. 기준만으로는 내가 원하는 위치에 정렬을 하기 힘들다. 그래서 이번엔 내가 원하는 곳에 정렬하는 방법을 알아보기로 한다. justify-content:"정렬위치"를 통해 내가 원하는 곳에 위치에서 정렬시킬 수 있다.

1) start,left

- 자식 노드들을 왼쪽에 위치 시킨다.