메뉴를 가운데 놓으려고 justify-content: center를 썼는데 세로 위치는 그대로다. align-items를 더했더니 이번에는 움직인다. CSS가 기분 따라 일하는 건 아니다. 두 속성이 맡은 축이 다르다.
justify-content와 align-items는 어느 방향을 정렬할까?
Flexbox는 display: flex를 준 부모 안에서 자식 항목을 배치한다. flex-direction: row라면 주 축은 가로, 교차 축은 세로다. justify-content는 주 축을, align-items는 교차 축을 정렬한다. 따라서 기본 row에서 가로 가운데에는 justify-content: center, 세로 가운데에는 align-items: center가 필요하다.
flex-direction: column으로 바꾸면 두 축의 방향도 바뀐다. 속성 이름은 그대로인데, 주 축이 세로가 되므로 justify-content가 세로 정렬을 맡는다. 그림의 파란 선은 주 축, 초록 선은 교차 축이다.
같은 항목을 row와 column에 놓으면 어떻게 달라질까?
아래 코드를 HTML 파일로 저장해 브라우저에서 열어 보자. 크기가 같은 A·B·C 세 칸에 같은 가운데 정렬 두 속성을 적용하고, 두 번째 부모만 column으로 바꿨다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Flex 가운데 정렬</title>
<style>
.demo {
display: flex;
width: 320px;
height: 180px;
box-sizing: border-box;
border: 1px solid #2563eb;
gap: 12px;
justify-content: center;
align-items: center;
}
.column { flex-direction: column; }
.item {
width: 48px;
height: 32px;
box-sizing: border-box;
background: #dbeafe;
}
</style>
</head>
<body>
<div class="demo">
<div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
<div class="demo column">
<div class="item">A</div><div class="item">B</div><div class="item">C</div>
</div>
</body>
</html>첫 부모에서는 세 칸이 가로로 나란히 모여 상자의 중앙에 놓인다. 둘째 부모에서는 같은 세 칸이 세로로 쌓여 중앙에 놓인다. 상자의 크기와 정렬 속성은 같은데 배열 방향을 바꾸자 항목의 위치도 달라진다.
flex-direction | 주 축: justify-content | 교차 축: align-items |
|---|---|---|
row | 가로 | 세로 |
column | 세로 | 가로 |
가운데 정렬이 안 보일 때 무엇을 확인할까?
먼저 display: flex를 항목이 아닌 부모에 줬는지 보자. 다음은 flex-direction이다. column인 부모에서 justify-content를 가로 정렬용이라고 생각하면 값을 바꿔도 엉뚱한 방향만 살피게 된다.
움직일 빈 공간이 있는지도 중요하다. 위 예제에서 부모의 height: 180px을 없애면 부모 높이가 항목 높이만큼 줄어들 수 있다. 실제로 같은 예제에서 높이를 auto로 바꾸자 부모 높이는 테두리를 포함해 34px, 항목은 32px이었다. 이때 align-items: center는 정상 동작해도 위아래로 이동할 여백이 거의 없다. '왜 안 움직이지?' 싶다면 정렬 속성보다 부모 크기부터 확인하자.
실제 화면에서는 글자 방향과 줄 바꿈에 따라 배치가 더 복잡해질 수 있다. row를 무조건 '왼쪽에서 오른쪽'으로 외우기보다, 개발자 도구에서 부모의 flex-direction과 남는 공간을 확인하는 편이 안전하다.
핵심 요약
justify-content는 주 축, align-items는 교차 축을 정렬한다. row에서는 주 축이 가로, column에서는 세로다. 가운데 정렬이 보이지 않으면 부모에 Flex가 적용됐는지 → 축 방향이 무엇인지 → 그 축에 남는 공간이 있는지 순서로 확인하면 된다.
