Flexbox Layout (플렉스박스 레이아웃)

 

🟢  Flexbox Layout

‘Flexible Box’의 줄임말로, 행(row) 또는 열(column) 방향의 한 축(1차원)을 기준으로 정렬하고 배치하는 레이아웃 방식.

 

◼️  특징 및 장점

• 방향의 자유로움: 가로(행) 또는 세로(열) 중 원하는 한 방향으로 요소를 쉽게 나열한다. (1차원)
• 유동적인 크기: 컨테이너의 크기에 맞춰 자식 요소들의 너비나 높이를 자동으로 늘리고 줄일 수 있다.
• 간편한 정렬: 과거 float이나 inline-block으로 구현하기 힘들었던 '수직 중앙 정렬'이나 '균등 분할'을 단 한 줄의 코드로 해결한다.
• 순서 변경: HTML 구조를 바꾸지 않고도 CSS 속성만으로 화면에 보이는 요소의 순서를 변경할 수 있다.

 

◼️  용어 설명

• 주체(Entities)
  • Flex Container (부모): display: flex;가 적용된 요소. 자식 요소들을 배치하는 '틀' 역할을 한다.
  • Flex Item (자식): 컨테이너 안에 담긴 개별 요소. 부모가 정한 규칙에 따라 움직인다.
• 축(Axes)
  • 주축 (Main Axis): 아이템이 배치되는 기본 방향. flex-direction 설정에 따라 가로, 또는 세로가 될 수 있다.
  • 교차 축 (Cross Axis): 주축과 수직을 이루는 축. 주축이 가로라면 교차 축은 세로가 된다.
• 시작점과 끝점 (Start & End)
  • Main Start / Main End: 주축이 시작되고 끝나는 지점.
  • Cross Start / Cross End: 교차 축이 시작되고 끝나는 지점.

 

 

📍  POINT 📍 

✔️ 플렉스박스는 1차원 레이아웃이므로, 한 번에 가로와 세로를 동시에 대규모로 배치할 때는 Grid(그리드)가 더 유리할 수 있습니다. ✔️

✔️ 모든 정렬의 기준은 주축(Main Axis)이 어디냐에 따라 결정되므로 방향 설정을 가장 먼저 확인해야 한다. ✔️

 

 

📋 플렉스박스 기본 구조 요약표 📋

용어	설명	비고
Flex Container	부모 요소	display: flex 선언 필요
Flex Item	자식 요소	부모 내부에서 정렬되는 대상
Main Axis	주축	아이템 배치의 기준선
Cross Axis	교차 축	주축과 직각을 이루는 축