Flexbox 레이아웃
페이지 정보
본문
웹 레이아웃의 혁명
웹 개발을 하다 보면 가장 자주 부딪히는 문제 중 하나가 바로 레이아웃 정렬입니다. 특히 화면 중앙 정렬, 아이템 간격 맞추기, 세로·가로 정렬 등은 초보 개발자뿐만 아니라 숙련자에게도 번거로운 작업이었습니다. 예전에는 float, inline-block, table 같은 속성을 조합하여 억지로 맞추곤 했습니다. 하지만 이 방식은 코드가 복잡하고 유지보수가 어렵다는 단점이 있었습니다.
이 문제를 근본적으로 해결해 준 것이 바로 Flexbox(Flexible Box Layout) 입니다. Flexbox는 CSS3에서 등장한 레이아웃 모듈로, 단순하면서도 강력한 정렬 방식을 제공합니다. 지금은 거의 모든 프로젝트에서 기본적으로 활용될 정도로 널리 사용되고 있으며, "웹 레이아웃의 혁명"이라고 불러도 과언이 아닙니다.
Flexbox의 기본 개념
Flexbox는 부모 요소와 자식 요소의 관계를 바탕으로 작동합니다. 부모 요소에 display: flex;를 선언하면 해당 부모는 flex 컨테이너(flex container) 가 되고, 그 안의 모든 자식 요소는 flex 아이템(flex item) 이 됩니다. 이후 다양한 속성을 이용해 컨테이너 안에서 아이템의 정렬, 배치, 간격 등을 손쉽게 제어할 수 있습니다.
주요 속성 살펴보기
flex-direction
아이템을 배치할 방향을 결정합니다.
-
row(기본값): 가로 방향 (왼쪽 → 오른쪽) -
row-reverse: 가로 방향 (오른쪽 → 왼쪽) -
column: 세로 방향 (위 → 아래) -
column-reverse: 세로 방향 (아래 → 위)
.container { display: flex; flex-direction: row; /* 가로 배치 *<span>}justify-content
주축(가로 또는 세로) 방향으로 아이템을 어떻게 정렬할지 설정합니다.
-
flex-start: 시작점 정렬 -
flex-end: 끝점 정렬 -
center: 중앙 정렬 -
space-between: 양 끝에 붙이고 중간은 균등 간격 -
space-around: 모든 아이템에 균등 여백 부여
.container { display: flex; justify-content: space-between;}align-items
교차축(가로·세로 반대 방향)에서 아이템을 정렬합니다.
-
flex-start: 위쪽 정렬 -
flex-end: 아래쪽 정렬 -
center: 중앙 정렬 -
stretch: 기본값, 아이템을 컨테이너 높이에 맞게 늘림
.container { display: flex; align-items: center;}flex-wrap
아이템이 컨테이너를 벗어날 경우 줄바꿈 여부를 결정합니다.
-
nowrap(기본값): 줄바꿈 없음 -
wrap: 자동 줄바꿈 허용 -
wrap-reverse: 줄바꿈 시 반대 방향으로 배치
.container { display: flex; flex-wrap: wrap;}중앙 정렬의 간단한 해결책
웹 개발자들이 가장 자주 검색하는 내용 중 하나가 바로 "가운데 정렬"입니다. 기존에는 absolute + transform 등을 조합해야 했지만, Flexbox라면 단 두 줄로 해결됩니다.
.container {
display: flex;
justify-content: center; /* 가로 중앙 *<span>
align-items: center; /* 세로 중앙 *<span>
}
반응형 디자인과 Flexbox
Flexbox는 반응형 웹 디자인과도 궁합이 뛰어납니다. flex-wrap과 flex-basis를 적절히 활용하면 화면 크기에 따라 자동으로 줄바꿈이 되거나 아이템 크기가 조정됩니다. 예를 들어 카드 형태의 갤러리 레이아웃을 만들 때 Flexbox는 훨씬 직관적이고 간단한 코드를 제공합니다.
.card-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.card {
flex: 1 1 calc(33.333% - 20px); /* 3열 레이아웃 *<span>
}
@media (max-width: 768px) {
.card {
flex: 1 1 100%; /* 모바일에서는 1열 *<span>
}
}
Flexbox의 장점
-
코드 단순화: 불필요한 해킹 기법이나 복잡한 마크업 없이도 정렬이 가능하다.
-
높은 가독성: 속성 이름만 봐도 역할이 직관적이다.
-
강력한 호환성: IE10 이상 대부분의 브라우저에서 지원된다.
-
반응형에 최적화: 화면 크기에 따라 유연하게 대응할 수 있다.