flex-direction column — 주축을 세로로 바꾸기 완전 정리

 

 

Web Development · Flexbox

flex-direction: column — 주축을 세로로

row → column · main axis 회전 · cross axis도 함께 변환

시작 오늘 분석할 코드

flex1과 모든 게 같은데 한 줄만 추가됐다 — flex-direction: column. 이걸로 자식 정렬 방향이 가로(왼→오)에서 세로(위→아래)로 바뀐다. 결과는 평소 block처럼 보이지만, flex의 정렬·간격 도구를 모두 쓸 수 있다는 차이가 있다.

#container { width: 500px; height: 300px; display: flex; flex-direction: column; /* ← 주축을 세로로 회전 */ border: 2px solid black; }

실제 출력 미리보기

1

2

3

용어 용어 정리

flex-direction주축 방향 결정

row기본값 — 왼→오 가로

row-reverse오→왼 가로 (역순)

column위→아래 세로 (이번 코드)

column-reverse아래→위 세로 (역순)

main 회전column이면 main이 세로

cross도 회전column이면 cross가 가로

justify-contentmain 축 정렬 (방향에 따라 의미 바뀜)

---

1 column이 세로로 보이는 이유

주축(main axis)이 세로라서, 자식들은 main 방향대로 위→아래로 늘어선다. cross 축은 가로가 된다.

[row 기본] [column] main main ─────► axis ┌─┐ ┌─┐ ┌─┐ ▼ │1│ │2│ │3│ ┌─┐ └─┘ └─┘ └─┘ │1│ cross ▼ ├─┤ │2│ ├─┤ │3│ └─┘ cross ──►

---

2 column = block처럼 보이지만 다른 점

평소 block (display 기본)

• 자식 자동 세로 쌓임
• vertical-align·정렬 도구 부족
• 간격은 margin으로
• flex 속성들 불가

flex column

• 자식 세로 쌓임 (같음)
• justify-content·align-items 사용 가능
• gap으로 간격 한 줄
• order, flex-grow 등 모두 사용

---

3 column에서 justify-content와 align-items의 의미가 바뀐다

주축이 회전했으니 정렬 속성의 작용 방향도 회전한다.

속성	row일 때	column일 때
justify-content	가로 정렬	세로 정렬
align-items	세로 정렬	가로 정렬

※ flex 처음 배울 때 가장 헷갈리는 부분. "justify는 main, align은 cross"를 기억하면 안 헷갈린다.

---

 

반응형

 

4 언제 column을 쓰나?

※ column 패턴 사용처

• 네비게이션 바(가로) 안에 메뉴 항목들이 있는 사이드바(세로)
• 카드 안에서 이미지(위) - 제목(중간) - 버튼(아래) 세로 배치
• 수직 가운데 정렬이 필요한 모달·로그인 박스
• 단순 block로 하면 align/justify를 못 써서 column flex가 더 편함

---

5 자주 하는 실수

실수	증상	해결
column에서 가로 정렬을 justify로 시도	의도와 반대로 작동	main/cross 개념 이해 후 align-items 사용
column-reverse로 콘텐츠 거꾸로	접근성·SEO 깨짐 (HTML 순서와 시각 순서 다름)	가능하면 HTML 자체를 의도된 순서로
height 미지정	column이지만 자식만큼만 세로 길이 — justify 효과 미미	부모 height 명시
중첩 flex	안쪽 flex의 main이 또 row로 시작	각 컨테이너마다 독립적 — 다시 column 명시

---

핵심 한 줄 요약

flex-direction주축 방향 결정

row (기본)왼→오 가로

column위→아래 세로

main/cross 회전column이면 두 축 모두 회전

justify는 maincolumn이면 세로 정렬

align은 crosscolumn이면 가로 정렬

block과의 차이flex 속성 사용 가능 (gap, order 등)

Tags

#flexbox #flex-direction #column #row #main-axis #cross-axis #justify-content #align-items #세로정렬 #주축회전 #CSS #HTML #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

flexbox, flex-direction, column, row, main-axis, cross-axis, justify-content, align-items, 세로정렬, 주축회전, CSS, HTML, 웹개발, 티스토리