화면 배치의 기본, Flexbox 제대로 이해하기

웹 개발을 하다 보면 가장 자주 고민하는 것 중 하나는 화면을 어떻게 배치할 것인가이다.
CSS에는 다양한 레이아웃 방법이 있지만, 지금의 표준은 크게 두 가지다:
Flexbox와 CSS Grid.

이번 글에서는 다음 내용을 정리한다:

• Flexbox의 핵심 속성: flex-direction, justify-content, align-items
• 추가 Flex 속성: flex-wrap, align-self
• Flexbox와 Grid의 차이

 

1. display: flex — 플렉스 박스의 시작

.container {
  display: flex;
}

flex를 선언하면, 해당 요소는 플렉스 컨테이너가 되고, 그 자식들은 플렉스 아이템이 된다.
자식들은 기본적으로 가로(row) 방향으로 배치된다.

 

2. 방향을 정하는 flex-direction

.container {
  display: flex;
  flex-direction: row; /* 기본값 */
}

 

row	왼쪽 ➝ 오른쪽 (기본)
row-reverse	오른쪽 ➝ 왼쪽
column	위 ➝ 아래
column-reverse	아래 ➝ 위

 

3. 줄 방향 정렬: justify-content

.container {
  display: flex;
  justify-content: space-between;
}

 

flex-start	시작 정렬
center	가운데 정렬
flex-end	끝 정렬
space-between	양 끝 고정, 중간 균등
space-around	양 옆 여백 포함 분산
space-evenly	모든 간격 동일하게

 

4. 반대 축 정렬: align-items

 반대축 정렬이란? 내가 설정한 flex-direction에 따라 그 반대축을 의미한다!

.container {
  display: flex;
  align-items: center;
}

 

stretch	기본값, 늘려 채움
flex-start	위쪽 정렬
center	수직 가운데 정렬
flex-end	아래 정렬

 

5. 줄바꿈 처리: flex-wrap

기본적으로 flex는 한 줄에 다 우겨 넣으려고 한다.
넘칠 경우 줄을 바꾸고 싶다면 flex-wrap을 사용한다.

 

.container {
  display: flex;
  flex-wrap: wrap;
}

 

nowrap	한 줄에 우겨 넣기 (기본값)
wrap	넘치면 줄 바꿈
wrap-reverse	줄 바꿈되되, 아래 ➝ 위로 쌓임

팁: 이미지 카드, 태그 버튼 리스트처럼 반응형으로 넘치면 줄 바꿔야 할 때 유용하다.

 

6. 아이템 개별 정렬: align-self

모든 아이템을 동일하게 정렬하는 게 아니라,
특정 아이템만 따로 정렬하고 싶다면 align-self를 쓴다.

 

.item {
  align-self: flex-end;
}

 

auto	부모 설정 따름 (기본값)
flex-start / flex-end / center / stretch	개별 지정 가능

 

7. Flexbox vs Grid 비교

축 개념	1축 (주로 줄 단위 정렬)	2축 (행 + 열 동시 배치)
주요 목적	아이템 간 정렬	전체 레이아웃 구성
레이아웃 계산	콘텐츠 기반	행/열을 명시적으로 설정
주 용도	네비게이션 바, 버튼 줄, 리스트	전체 페이지 레이아웃, 대시보드

 

언제 Flexbox를 쓰면 좋을까?

• 한 방향(가로 or 세로) 정렬이 주 목적일 때
• 메뉴, 버튼 그룹, 태그 리스트 등 콘텐츠 흐름 중심일 때
• 간단한 카드 정렬, 공백 분배가 필요할 때

---

언제 Grid를 쓰면 좋을까?

• 행과 열을 명시적으로 제어하고 싶을 때
• 페이지 전체 구조를 구성할 때 (예: GNB, LNB, 메인 콘텐츠, 푸터)
• 대시보드, 갤러리처럼 정해진 격자 레이아웃이 필요한 경우

---

8. 그 외 함께 알아두면 좋은 속성들

gap	flex 또는 grid 사이 간격 설정
flex-grow, flex-shrink	아이템의 유연한 크기 설정
order	아이템의 순서 지정
min-width, max-height	크기 제한으로 레이아웃 보호

---

마무리

화면 배치를 깔끔하게 만들기 위해서는
기본 레이아웃 모델을 정확히 이해하고, 각각의 속성이 어떤 축에서 작동하는지를 구분할 수 있어야 한다.

• 한 방향 정렬이라면 Flexbox
• 행과 열을 동시에 설계하고 싶다면 Grid