CSS 레이아웃 속성 정리 (Flexbox 중심)

웹 페이지에서 레이아웃은 단순히 요소를 배치하는 수준을 넘어, 사용자 경험(UX)을 좌우하는 핵심 요소이다. CSS는 발전하면서 다양한 레이아웃 방식을 제공해왔고, 현재는 Flexbox와 Grid가 사실상 표준으로 자리 잡았다.

 

 

 

전통적인 레이아웃 기법

float

원래는 이미지와 텍스트를 나란히 두기 위해 만들어진 속성이다.

img { float: left; margin-right: 10px; }

• 문제점
  • 부모 높이가 무너지는 "clearfix" 문제가 발생할 수 있다.
  • 수평/수직 정렬이 복잡하다.

inline-block

display: inline-block을 활용해 가로 정렬을 구현할 수 있다.

.menu-item { display: inline-block; width: 100px; }

• 문제점
  • inline 요소 특성상 사이 공백이 발생한다.
  • 반응형 레이아웃을 구현하기엔 제한적이다.

그래서 보다 직관적이고 강력한 레이아웃 시스템인 Flexbox가 등장했다.

 

 

 

Flexbox 등장 배경

• float와 inline-block은 원래 레이아웃 전용 속성이 아니었다.
• 복잡한 레이아웃을 구현하려면 해킹성 코드와 트릭이 필요했다.
• Flexbox는 레이아웃 자체를 위한 전용 모델로 등장했다.
  • 1차원 레이아웃(가로나 세로 한 축 기준) 최적화에 탁월하다.
  • 요소 크기 조정, 정렬, 공간 분배가 직관적이다.

 

 

 

Flex 컨테이너 속성

부모 요소에 display: flex를 선언하면,

• 해당 요소는 Flex 컨테이너가 되고
• 자식은 Flex 아이템이 된다.

.container { display: flex; }

주요 속성

• flex-direction: 주 축 방향 설정
  • row(기본), row-reverse, column, column-reverse
• justify-content: 주 축 정렬
  • flex-start, flex-end, center, space-between, space-around, space-evenly
• align-items: 교차 축 정렬
  • stretch(기본), flex-start, flex-end, center, baseline
• flex-wrap: 아이템 줄바꿈 여부
  • nowrap(기본), wrap, wrap-reverse
• gap: 아이템 사이 간격 (margin 없이도 사용 가능)

 

 

 

Flex 아이템 속성

각 자식 요소(Flex 아이템)에 개별 적용할 수 있다.

• flex-grow: 남는 공간을 얼마나 차지할지

.item1 { flex-grow: 1; } 
.item2 { flex-grow: 2; } /* item2가 두 배 차지 *

• flex-shrink: 공간이 부족할 때 줄어드는 비율
• flex-basis: 기본 크기 (width 대체 가능)
• align-self: 개별 아이템 교차축 정렬 (auto, flex-start, flex-end, center, stretch)

flex-grow flex-shrink flex-basis는 축약형 flex 속성으로 자주 사용한다.

.item { flex: 1 1 auto; /* grow, shrink, basis */ }

 

 

 

Flex vs Grid: 언제 어떤 걸 써야 할까?

• Flexbox
  • 1차원 레이아웃 (가로나 세로 한 방향)
  • 요소 간 정렬, 간격 조정에 강점
  • 예: 네비게이션 바, 버튼 그룹, 카드 리스트
• Grid
  • 2차원 레이아웃 (행과 열 동시에 제어)
  • 복잡한 페이지 레이아웃에 최적화
  • 예: 대시보드, 갤러리, 전체 페이지 구조

단순 정렬은 Flex, 복잡한 틀은 Grid.

실무에서는 두 가지를 혼합해서 사용한다.

 

 

 

실무 레이아웃 패턴 예시

네비게이션 바 (Flex)

.nav { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}

카드 리스트 (Flex + wrap)

.cards { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
} 

.card { 
    flex: 1 1 200px; 
    /* 최소 200px, 남는 공간 비율대로 확장 */ 
}

대시보드 (Grid)

.dashboard { 
    display: grid; 
    grid-template-columns: 1fr 2fr 1fr; 
    gap: 20px; 
}

 

 

 

정리하자면...

• 과거 레이아웃은 float/inline-block에 의존했으나 한계가 많음
• Flexbox는 1차원 레이아웃을 직관적으로 제어할 수 있는 강력한 도구
• 컨테이너 속성(flex-direction, justify-content, align-items, flex-wrap, gap)과 아이템 속성(flex-grow, flex-shrink, flex-basis, align-self)을 구분해 이해해야 함
• Grid는 2차원 레이아웃에서 강력, Flex는 단순 정렬에서 강력
• 실무에서는 Flex와 Grid를 적절히 조합해 사용