[CSS] 플렉스박스(Flexbox) 개념 이해

 

Flexbox

 

---

 

Flexbox란

Flexbox, 또는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델입니다. (참고: CSS Grid Layout는 2차원 레이아웃 모델)

 

Flexbox는 기본적으로 플렉스 컨테이너(flex container)와 컨테이너의 컨텐츠인 플렉스 아이템(flex item)으로 이루어져있습니다. 여러 개의 내부 엘리먼트(자식 요소)를 담고 있는 외부 엘리먼트(부모 요소)에 display: flex; 스타일을 적용하면, 외부 엘리먼트는 flex container가 되고, 내부 엘리먼트는 자동으로 flex item이 됩니다. 이때 외부 엘리먼트는 직접적으로 붙어있는 부모 요소(direct parent)만 해당됩니다.

 

 

Main/Cross Axis 개념 이해

 

출처 : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

flexbox을 통해 레이아웃 될 때, 요소들은 두 개의 축을 따라 배치됩니다. 주축(main axis)은 flex item이 정렬되고 있는 방향으로 진행하는 축입니다.  교차축(cross axis)은 주축에 직각을 이루는 축입니다.

 

main axis를 기준으로 flex item을 정렬하는 속성 :

• justify-content

cross axis를 기준으로 flex item을 정렬하는 속성 :

• align-content
• align-items
• align-self

 

 

flex-direction 속성

main axis와 cross axis는 flex-direction 속성을 통해 축이 진행되는 방향을 변경할 수 있습니다.

 

• flex-direction: row (default value)
  • main-axis : 수평 방향(왼쪽에서 오른쪽으로)으로 진행 (→)
  • cross axis : 수직 방향(위에서 아래로)으로 진행 ( ↓ )
• flex-direction: row-reverse
  • main axis : 수평 방향(오른쪽에서 왼쪽으로)으로 진행 (←)
  • cross axis : 수직 방향(아래에서 위로)으로 진행 ( ↑ )
• flex-direction: column
  • main axis : 수직 방향(위에서 아래로)으로 진행 ( ↓ )
  • cross axis : 수평 방향(왼쪽에서 오른쪽으로)으로 진행 (→)
• flex-direction: column-reverse
  • main axis : 수직 방향(아래에서 위로)으로 진행 ( ↑ )
  • cross axis : 수평 방향(오른쪽에서 왼쪽으로)으로 진행 (←)

 

flex item들의 흐름 방향을 전체적으로 제어하기 때문에 justify-content, align-items, flex-direction 등의 속성은 flex container에 지정해야 합니다.

 

 

 

 

 

※ 참고자료

1. MDN web docs : https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Flexbox

2. <daleseo/> Dev Blog : https://www.daleseo.com/css-flexbox/

3. Web Club (jaiyah님의 블로그) : https://webclub.tistory.com/628