[HTML, CSS] 그리드와 플렉스에서의 정렬 (justify & align)

이번 글에서는 블로그 내에서 간단하게 언급된 적이 있는 그리드/플렉스에서의 정렬과 관련된 속성을 정리하겠습니다.

 

가장 먼저 확인해야 할 것은 메인 축이 설정되어 있는 방향입니다. 메인 축(ex: flex-direction) 속성은 가로축(row)가 디폴트 값이지만 세로축(column)으로도 설정할 수 있습니다. 

 

메인 축이 설정되면 ① 메인 축과 평행한 방향에서의 정렬과 ② 메인축과 수직인 방향에서의 정렬로 나뉘어집니다. 전자는 justify-_______ 속성에 해당하고, 후자는 align-_______ 속성에 해당하게 됩니다. (빈칸에는 content, items, self가 들어갈 수 있습니다.)

* 플렉스 구조에서는 justify-items와 justify-self는 작동하지 않습니다. 

1) justify/align-content : 요소들이 빈 공간을 어떻게 사용하는지를 정의합니다. 

- 가능한 속성 값 : start, end, center, space-between, space-around, space-evenly, stretch

space-around, space-between, space-evenly의 차이

 

2-1) jutify/align-items : 컨테이너 안에 있는 모든 요소들의 jutify/align-self 속성을 정의합니다. 

2-2) jutify/align-self : 정해진 공간 (ex: 그리드 셀) 안에서 요소가 정렬되는 방식을 정의합니다. 2)에서 정의한 속성 값보다 우선적으로 적용됩니다. 

- 가능한 속성 값 : start, end, flex-start, flex-end, left, right, stretch

align-items: start; (1은 align-self: center;)