[HTML, CSS] 플렉스(Flex) 레이아웃 - 컨테이너 편

Flexbox, Flexible Box로도 불리는 플렉스(Flex)는 이름 그대로 더 유연한(Flexible)한 반응형 디자인을 지원합니다.

여러 요소들이 있으면 1차원에 한해서 요소들의 방향, 크기, 정렬과 같은 다양한 속성들을 쉽게 설정할 수 있습니다.

플렉스의 기본 구조

플렉스를 사용하기 위해서는 먼저 부모 요소인 플렉스 컨테이너(Flex Container)를 정의해야 한다. 정의하는 방법은 display 속성을 flex로 설정하는 것입니다. 플렉스 컨테이너 내부에 있는 자식 요소들은 자동으로 플렉스 아이템(Flex Item)이 되어 플렉스 컨테이너를 배경으로 가집니다.

아래 예시에서 회색 배경은은 플렉스 컨테이너, 빨간 상자들은 플렉스 아이템입니다.

 

1

2

3

4

5

6

 

플렉스의 속성들은 크게 플렉스 컨테이너에 적용되는 것들과, 플렉스 아이템에 적용되는 것들로 구분됩니다. 이 글에서는 전자에 대해 소개하겠습니다. 후자에 속하는 플렉스 아이템에 대한 내용은 이 글을 참고하시길 바랍니다.

[HTML, CSS] 플렉스(Flex) 레이아웃 - 아이템 편

---

① flex-dirction, ② flex-wrap, ③ flex-flow, ④ justify-content, ⑤ align-items, ⑥ align-content, 총 6가지 속성을 설명하겠습니다.

(클릭하면 각 설명으로 이동합니다!)

① flex-direction, 요소들의 방향

flex-direction 속성은 플렉스 아이템들을 어떤 방향으로 쌓을지 설정합니다. flex-direction 을 row로 설정하면 가로축 방향, column으로 설정하면 세로축 방향으로 쌓게 됩니다.

 

1

2

3

4

5

6

flex-direction: column;

 

flex-direction을 row-reverse와 column-reverse로도 설정할 수도 있습니다. 축 자체는 달라지지 않지만 축 위에서 역순으로 쌓게 됩니다. row-reverse는 오른쪽에서 왼쪽으로, column-reverse은 밑에서 위로 쌓게 됩니다.

 

②  flex-wrap, 줄바꿈 처리

flex-wrap 속성은 플렉스 아이템들이 플렉스 컨테이너의 넓이를 벗어날 때, 즉 한 줄에 더 담을 공간이 없을 때의 처리 방식을 설정합니다. flex-wrap을 wrap으로 설정하면 줄바꿈을 하게 되어 아랫줄에 요소들을 놓고, nowrap으로 설정한다면 줄바꿈을 하지 않아 플렉스 컨테이너의 넓이에 맞게 플렉스 아이템들의 넓이가 자동으로 조절됩니다. 

 

1

2

3

4

5

6

7

flex-wrap: wrap;

 

1

2

3

4

5

6

7

flex-wrap: nowrap;

 

flex-direction과 같이 flex-wrap도 역순으로 배치할 수 있습니다. flex-wrap을 wrap-reverse로 설정하면 wrap일 때와는 반대로 윗줄들에 요소를 놓습니다. 

1

2

3

4

5

6

7

flex-wrap: wrap-reverse;

 

③ flex-flow, flex-direction + flex-wrap

flex-flow 속성은 flex-direction과 flex-wrap을 동시에 설정합니다. 코드를 작성할 때는 flex-direction을 먼저 작성하고 한 칸 띄운 뒤, flex-wrap을 작성하면 됩니다. 

.flex-container {
  display: flex;
  flex-wrap: row wrap;
  /* flex-wrap: column wrap; */
  /* flex-wrap: row-reverse nowrap; */
}

 

④ justify-content, 축에 평행한 방향에서의 정렬

justify-content는 앞서 설정한 flex-direction에 평행한 방향에서의 정렬을 설정합니다. justify-content에서 flex-start는 왼쪽 정렬, center는 가운데 정렬, flex-end는 오른쪽 정렬에 해당합니다. space-around, space-between, space-evenly는 서로 유사하지만 차이점이 존재합니다. 다음 이미지로 설명을 대체하겠습니다. 

space-around, space-between, space-evenly의 차이

 

⑤ align-items, 축에 수직인 방향에서의 정렬

align-items는 앞서 설정한 flex-direction에 수직인 방향에서의 정렬을 설정합니다. 만약 flex-direction이 row라면, flex-start는 아이템들을 위로, center는 가운데로, flex-end는 밑으로 정렬합니다. 만약 column이라면, flex-start는 아이템들을 왼쪽으로, center는 가운데로, flex-end는 오른쪽으로 정렬합니다.

align-items가 가지는 다른 속성으로는 stretch와 baseline이 있습니다. stretch는 아이템들을 수직 방향으로 늘리고, baseline은 아이템들의 텍스트를 기준선으로 정렬합니다. 

 

1

2

3

align-items: stretch;

 

A

f

g

align-items: baseline;

 

* justify-content 속성과 align-items 속성을 둘 다 center로 설정하면 축에 수평 방향과 수직 방향에서도 가운데 정렬이 되어 완벽한 중앙에 아이템을 설정할 수 있습니다!

 

⑥ align-content, 줄바꿈된 아이템들의 정렬

앞서 flex-wrap으로 줄바꿈 처리 방식을 설정한다고 설명했습니다. align-content 속성은 flex-wrap이 wrap으로 설정되어 여러 줄이 생겼을 때, 이 줄 사이의 공간을 정의하고 줄들을 정렬하는 방식을 설정합니다. 

설정할 수 있는 값으로는 flex-start, center, flex-end, stretch, space-around, space-between, space-evenly 등이 있습니다. 값들에 따라 변하는 방식은 앞서 justify-content와 align-items에서 설명한 부분과 유사하기 때문에 예시는 생략하겠습니다.