제 부사수 민수는 지독한 ‘길치’였습니다. CSS 좌표 잡는 걸 그렇게 어려워했죠. 어느 날 justify-content와 align-items를 반대로 적어서 레이아웃이 다 깨진 걸 보고, 제가 모니터에 포스트잇 한 장을 붙여줬습니다. 거기엔 딱 한 문장이 적혀 있었습니다.
“지금 네가 깐 도로는 어디로 뚫려 있냐?”
Flexbox는 사실 박스를 배치하는 게 아닙니다. ‘흐름(도로)’을 만드는 겁니다. 꼬치구이가 정적인 이미지라면, 도로는 우리가 매일 보는 동적인 이미지라 훨씬 이해가 빠를 겁니다. 이 글을 다 읽을 때쯤엔, 머릿속에 신호등 하나가 켜질 겁니다.
1. Flex-direction: 도로를 깝니다
가장 먼저 해야 할 일은 도로 공사입니다. 차(Item)를 올리기 전에 길이 어디로 뚫려있는지 알아야죠.
- 🚧 Row (기본값): 왼쪽에서 오른쪽으로 가는 ‘가로 고속도로’를 깝니다.
- 🚧 Column: 위에서 아래로 떨어지는 ‘세로 국도’를 깝니다.
이 도로의 진행 방향이 바로 ‘메인 축(Main Axis)’이 됩니다.
2. Justify-content: 앞차와의 ‘안전거리’
자, 도로(Main Axis)를 깔았습니다. 이제 차들이 달립니다. justify-content는 차들이 진행 방향으로 어떻게 서 있을지를 정합니다.
“민수야, 차가 막혀서 다닥다닥 붙어 있으면 뭐지?”
“음.. flex-start요?”
“그럼 휴게소 들렀다 가느라 차들이 띄엄띄엄 있으면?”
“space-between이겠네요!”
도로가 가로로 뚫려있든 세로로 뚫려있든 상관없습니다. 무조건 차가 달리는 방향으로 간격을 조절하는 게 Justify입니다.
3. Align-items: ‘차선 변경’ 하세요
이게 핵심입니다. align-items는 차가 달리는 방향이 아니라, 차선(Lane)을 바꾸는 것입니다. 도로의 폭 안에서 움직이는 거죠.
- ✅ 가로 도로(Row)일 때:
차가 왼쪽→오른쪽으로 달립니다. 이때 ‘차선 변경’은 위/아래로 움직이는 거죠?
그래서 Align이 수직 정렬이 되는 겁니다. (1차선으로 갈지, 2차선으로 갈지) - ✅ 세로 도로(Column)일 때:
차가 위→아래로 떨어집니다. 이때 ‘차선 변경’은 좌/우로 움직이는 거죠?
그래서 Align이 수평 정렬이 되는 겁니다.
💡 코드캠의 실전 TIP
많은 초보자들이 align-items를 썼는데 왜 중앙으로 안 오냐고 묻습니다.
도로 폭(Container의 높이 혹은 너비)이 딱 차 한 대 지나갈 폭(Auto)밖에 안 되기 때문입니다. 차선을 바꿀 여유 공간(Height)을 줘야 차선 변경이 가능합니다. 공간부터 확보하세요!
마치며
꼬치구이 대신 ‘도로’를 떠올리니 좀 더 명확해지셨나요?
Flexbox를 만날 때마다 모니터 속에 도로를 까세요. “이 도로는 가로인가 세로인가?” 먼저 묻고, “앞차 간격(Justify)”과 “차선 변경(Align)”만 생각하면 됩니다.
이번 비유는 어떠셨나요?
혹시 이 설명도 2% 부족하다면, ‘지하철 빈자리 이론’으로 다시 준비해 오겠습니다. (웃음) 댓글 남겨주세요!
