[CSS] Flex를 사용하여 DIV 예쁘게 배치하기 (Container 편)

옛날에 웹 디자인은...?

옛날에는 웹 디자인을 하면서 position, float, display 등으로 레이아웃을 배치하고 콘텐츠들을 정렬했었습니다.

 

하지만 한계가 있었고, text-align이나 vertical-align 등을 사용하여 가로 세로를 배치하고 몇 픽셀 어긋나면 margin, padding, top, left, line-height를 써가며 위치를 옮겨 디자인을 했습니다.

 

더 나아가 원하는 위치에 알맞은 크기로 정렬하기 위해 태그를 사용하여 수많은 내용을 배치했었죠.

그 수많은 테이블 태그 안에 또 새로 시작되는 테이블 태그.. 그 안에 또... 어휴.. 상상하기 싫군요.

 

그리고 이러한 테이블 태그를 사용해서 레이아웃을 만들고,

원하는 곳에 글과 콘텐츠를 위치하고 정렬할 수 있어도,

요즘 같은 모바일을 더 많이 사용하는 시대에서 꼭 필요한 반응형 웹 페이지를 만들 수 없습니다.

 

이러한 문제를 해결하기 위해 CSS Flex 속성을 이용하여 레이아웃을 구성할 수 있습니다.

---

Flex 속성이란?

Flexible Box의 줄임말입니다. Flex속성은 컨테이너와 아이템이라는 두 가지 요소로 됩니다.

컨테이너는 아이템들을 포함하는, 감싸주는 부모 역할을 하고 있습니다.

 

이 부모역할을 하는 컨테이너는 아이템들을 컨테이너 안에서 어떻게 배치할지, 각 아이템들을 가로로 어떻게 정렬할지, 세로로 어떻게 정렬할지, 한 줄을 어떻게 넘어갈지 등, 아이템들을 구성하는 방향으로 기능을 가지고 있습니다.

 

아이템은 각 요소로서 자식 역할을 하고 있습니다.

 

아이템은 각자 모양을 어떻게 할지, 컨테이너나 환경 등의 크기가 바뀌었을 때 어떻게 크기를 변형할지, 컨테이너의 정렬 방식을 무시하고 독단적으로 어떻게 정렬이 될지도 정할 수 있으며, 각 아이템들의 순서를 정하여 누가 먼저 위치할지도 정할 수 있습니다.

 

Flex의 기능이 많죠?

그럼 Flex의 컨테이너와 아이템을 나누어

이번 포스트에서 컨테이너(Container)의 CSS 속성을 살펴보겠습니다.

---

 

[컨테이너 속성] display : flex

아이템들을 감싸는 컨테이너에 display:flex 라는 css 속성을 추가해봅시다.

flex를 추가한 컨테이너 안에 '아이템'들을 추가하면 다음과 같이 아이템들이 컨테이너 안에서 가로로 나열되어 있는 모습을 볼 수 있습니다.

아이템에는 display:flex를 붙이지 않아도 됩니다. (컨테이너의 속성이기 때문이죠.)

 

See the Pen flex-01 by wooncloud (@lomeiskk) on CodePen.

 

[컨테이너 속성] display : inline-flex

css의 display에는 2가지 속성이 있습니다. flex 와 inline-flex 가 있죠

간단히 요약하자면 컨테이너를 세로로 나열할지 가로로 나열할지 결정해줍니다.

 

컨테이너 안의 아이템들은 부모인 컨테이너가 flex나 inline-flex를 가지고 있으면 가로 나열이 되겠지만,

인접한 컨테이너를 세로로 나열할지 가로로 나열할지 결정을 하고 싶다면?

 

컨테이너를 가로로 배치하려면 display:inline-flex를 사용하고,

컨테이너를 세로로 배치하려면 display:flex를 사용하면 되는 것이죠.

 

See the Pen flex-02 by wooncloud (@lomeiskk) on CodePen.

 

 

 

[컨테이너 속성] justify-content : 아이템 수평 정렬

컨테이너 내부 아이템들을 예쁘게 정렬하는 것은 아주 중요합니다.

이 justify-content 속성은 아이템들을 수평방향으로 어떻게 정렬할 것인지 설정할 수 있습니다.

justify-content은 대표적으로 다음과 같이 6가지 속성이 있습니다.

 

flex-start	기본값입니다. 아이템들이 컨테이너의 앞에서부터 정렬됩니다 (왼쪽 정렬).
flex-end	아이템들이 컨테이너의 뒤에 정렬됩니다 (오른쪽 정렬).
center	아이템들이 컨테이너의 가운데 정렬됩니다.
space-between	아이템들이 수평방향으로 아이템과 아이템 사이(between)에만 일정한 공간을 두고 정렬됩니다.
space-around	아이템들이 수평방향으로 앞, 뒤로 주위(around)에 일정 공간을 가지고 배치됩니다.
space-evenly	수평방향 양끝 아이템 바깥부분까지 포함하여 아이템 외의 남는공간을 아이템 사이에 일정하게 둠 (말로 표현하기 너무 어려우니 그림으로 보시죠...)

See the Pen flex-03 by wooncloud (@lomeiskk) on CodePen.

justify-content 각 속성들

 

[컨테이너 속성] align-items : 한 줄짜리 아이템 수직 정렬

justify-content 속성이 아이템들을 수평방향으로 정렬했다면 align-items은 수직방향으로 정렬하는 것을 설정합니다.

컨테이너 안에 아이템들이 어떤 내용을 가지고 있냐에 따라, 각각 다른 세로 길이를 가질 수 있습니다.

 

이런 각자 다른 아이템들의 수평 간격은 justify-content로 정렬했지만,

수직방향으로 뒤죽박죽 놓여 있다면 보기가 좋지 않겠죠. align-items는 이러한 설정을 도와줍니다.

 

align-items는 대표적으로 다음과 같이 5가지 속성이 있습니다.

stretch	기본값입니다. 컨테이너 상단부터 하단까지 아이템을 늘립니다.
flex-start	아이템들이 컨테이너의 상단을 기준으로 정렬합니다.
flex-end	아이템들이 컨테이너의 하단을 기준으로 정렬합니다.
center	아이템들이 컨테이너의 수직 가운데 정렬됩니다.
baseline	아이템들이 텍스트 기준선에 정렬됩니다.

See the Pen flex-04 by wooncloud (@lomeiskk) on CodePen.

 

[컨테이너 속성] align-content : 여러 아이템 행 정렬

컨테이너 안에 아이템을 넣다 보면 아이템의 개수가 많아져서 컨테이너 가로길이를 넘어 다음 줄로 넘어갈 때가 있습니다.

 

아이템이 다음줄로 넘어가면 1번 줄에 있는 아이템들과 2번 줄에 있는 아이템, 3번 줄, 4번 줄......

여러 줄의 아이템들의 세로 간격까지 설정해야겠죠?

 

그럴 때 align-content는 여러 행의 아이템들을 수직방향 배치를 할 때 사용합니다.

align-content는 justify-content의 세로 버전이라고 생각하면 이해하기 쉬울 겁니다.

 

align-content의 속성은 6가지가 있습니다.

stretch	기본값입니다. 아이템들이 컨테이너 상하를 빈 공간 없이 늘려서 채웁니다.
flex-start	아이템들이 컨테이너의 상단에서부터 정렬됩니다.
flex-end	아이템들이 컨테이너의 하단에서부터 정렬됩니다.
center	아이템들이 컨테이너의 수직방향 가운데 정렬됩니다.
space-between	아이템들이 수직방향으로 아이템과 아이템 사이(between)에만 일정한 공간을 두고 정렬됩니다.
space-around	아이템들이 수직방향으로 앞, 뒤로 주위(around)에 일정 공간을 가지고 배치됩니다.
space-evenly	수직방향으로 양끝 아이템 바깥부분까지 포함하여 아이템 외의 남는공간을 아이템 사이에 일정하게 둠. (이거 쉽게 설명하는 방법좀..)

See the Pen flex-05 by wooncloud (@lomeiskk) on CodePen.

 

 

 

[컨테이너 속성] flex-direction : 아이템 배치 방향

direction!! 방향입니다! 컨테이너 안의 아이템들을 어떤 방향으로 배치할지 결정할 수 있습니다.

row	아이템들을 행방향 (가로방향) 왼쪽부터 정렬합니다.
column	아이템들을 열방향 (세로방향) 위쪽부터 정렬합니다.
row-reverse	말 그대로인 row방향과 반대로, 행방향 (가로방향) 오른쪽부터 정렬합니다.
column-reverse	column 방향과 반대로 열방향 (세로방향) 아래쪽부터 정렬합니다.

 

See the Pen flex-06 by wooncloud (@lomeiskk) on CodePen.

 

 

[컨테이너 속성] flex-wrap : 아이템 줄 바꿈

컨테이너 안에 아이템이 많아서 다음 줄로 넘길 때,

넘길까? 넘기지 말까? 넘긴다면 아래에 넘길까? 위로 넘길까? 등을 정합니다.

nowrap	아이템을 구성하는 행이 컨테이너보다 가로크기가 커져도 줄바꿈을 하지 않습니다. 아이템은 그대로 컨테이너 밖으로 나가버립니다.
wrap	다음 줄로 줄바꿈 합니다. 아래 줄로 넘어간다는 뜻입니다.
wrap-reverse	윗 줄로 줄바꿈합니다. wrap의 역순입니다.

 

See the Pen flex-06 by wooncloud (@lomeiskk) on CodePen.

 

 

[컨테이너 속성] flex-flow : flex-direction과 flex-wrap의 단축 속성

위의 flex-direction과 flex-wrap을 한 줄로 설정할 수 있는 단축 속성입니다.

이 속성에 대해 알고 있다면 두 속성 모두 정의해야 할 때, 한 줄로 단축시킬 수 있습니다.

 

예시로, flex-flow : row wrap; 이라고 적으면

"flex-direction의 row속성과 flex-wrap의 wrap 속성을 다 정의하겠다."

라고 할 수 있겠습니다.

 

flex-flow의 정의 순서는 flex-direction과 flex-wrap 순서입니다.