[CSS] div 정렬하기, div 정렬 (flex 사용)

[CSS] div 정렬하기, div 정렬

이전 게시글 div 정렬하기, div 가운데 정렬하기 에 이어서 div 정렬하는 방법 2 이다. 해당 게시글에서는 display 속성에 flex 값을 주어 손쉽게 9방향으로 정렬하는 방법을 알아보자.
9방향 : 키보드에서 넘버패드 방향

display: flex

우선 display 속성에 flex값을 주면 어떻게 변경이 되는지 알아야 한다. 매우 자세하게 다루면 좋겠지만 그 정도 글을 쓸 수 있는 글 재주가 있는 것은 아닌 것 같다. 간단하게 이번 게시글에서 사용한 값 정도만 설명해보겠다.

display: flex와 justify-content, align-items만 알면 간단한 정렬은 쉽게 할 수 있다. 각각에 대해 간단히 알아보자.

 

- display: flex

dispaly: flex 값을 주게 되면 기본적으로 flex-direction 값은 row가 된다. 즉 정렬에 대한 중심축이 가로로 되면서, 자신 아래에 있는 아이템들이 가로로 정렬이 된다는 것이다.

 

- justify-content

flex-direction과 같은 방향이라고 생각하면 된다. 즉 중심축으로 정렬을 한다는 것이다. 현재 flex-direction이 row(-)이기 때문에 row(-) 방향으로 정렬을 한다는 것이다. 이 상태에서 justify-content: center를 주게 되면 중심축 방향에서 가운데에 아이템이 위치하게 된다.

 

- align-items

flex-direction 방향과 교차하는 방향, 즉 flex-direction이 row이면 column 방향, 교차축으로 정렬된다고 생각하면 된다. flex-direction이 row 값인 경우 align-items: center 값을 주면 세로 방향(교차축)으로 가운데 정렬이 된다.

justify-content, align-items

위에서 언급하였듯이 justify-content는 중심축 정렬, align-itmes는 교차축 정렬이다. 각각의 속성에 할당할 수 있는 값은 여러가지가 있지만 9가지 방향으로 정렬하기 위해서는 flex-start, center, flex-end만 알면 된다. 이것을 활용하여 정렬하는 방법은 코드를 보면 쉽게 이해할 수 있다.

9 방향 정렬 코드

See the Pen div 정렬하기 - 2 by Codiving (@codiving) on CodePen.

정리

정렬하는 방법은 여러가지가 있다. 그러나 9방향으로 정렬하는 방법은 flex를 이용하면 매우 간단하게 할 수 있다. 이것을 계기로 flex에 대해 더 자세하게 공부를 해도 좋을 것 같다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다. (설명 너무 못 해서 죄송합니다...)