display: flex;
justify-content: center;
justify-content 속성
justify-content 속성은 플렉스 요소의 수평 방향 정렬 방식을 설정합니다.
이 속성은 다음과 같은 속성값을 가질 수 있습니다.
-
flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.
-
flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치됩니다.
-
center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치됩니다.
-
space-between : 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다.
-
space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.
align-items: center;
align-items 속성
align-items 속성은 플렉스 요소의 수직 방향 정렬 방식을 설정합니다.
이 속성은 한 줄만을 가지는 플렉스 박스에서는 효과가 없으며, 두 줄 이상을 가지는 플렉스 박스에서만 효과가 있습니다.
이 속성은 다음과 같은 속성값을 가질 수 있습니다.
-
stretch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.
-
flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.
-
flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.
-
center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.
-
baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치됩니다.
