Flexible box Layout - 플렉스 박스 #1

플렉스 박스 레이아웃

이번 포스팅에서는 새로운 레이아웃 모듈 중에 가장 포괄적인 격자 레이아웃과 함께 유동적인 레이아웃 모듈 또는 플렉스박스^[각주:1]라고 하는 모듈에 대해 소개하고자 하는데, 이 모듈은 보다 복잡한 웹 페이지와 응용프로그램들을 구현할 수 있도록 설계된 새로운 레이아웃입니다.

이 플렉스 박스는 일상적으로 발생하는 문제들을 많이 처리할 수 있고 웹 페이지의 배치에 획기적으로 변화를 주는 잠재성을 보유하고 있습니다.

플렉스박스가 등장하면서 레이아웃의 까다로운 점, 즉 융통성을 부여하거나 공간 분배와 같은 문제를 해결하면서 CSS가 추구하는 기본 개념을 그대로 반영하는 솔루션을 제공할 수 있게 되었습니다.

아직까지 IE와 같은 구형 브라우저의 지원률이 미흡하지만 모바일에서는 지금 당장이라도 사용할 수 있으며 웹이 앞으로 지향해야 할 방향성을 잘 제시해 주는 모듈이라고 할 수 있습니다.

이제부터 플렉스박스가 정확하게 무엇인지, 그리고 어떤 기능을 갖고 있는지에 대해서 살펴보고 이 모듈에서 제시하고 있는 각각의 속성과 값들을 살펴보도록 하겠습니다.

플렉스 박스(Flex box)란?

정확하게 플렉스박스 레이아웃이란 무엇을 의미하고 어떤 장점이 있을까요?

이 레이아웃을 형성하는 가장 기본적인 모델은 플렉스 컨테이너(flex container)와 관련이 있습니다. 이 컨테이너의 콘텐츠를 플렉스 항목(flex items)이라고 하며, 이 플렉스 항목의 가장 기본적인 기능은 크기를 "유연"하게 조절하는 능력입니다.

즉, 공간에 따라서 가로 또는 세로의 길이를 조절할 수 있으며 가용 공간에 대한 비율을 기반으로 크기를 조절할 수도 있습니다.

플렉스 항목이 자랑하는 또 하나의 인상적인 기능은 시각적인 순서와 방향을 정할 수 있다는 것입니다.

간단히 말해서 플렉스박스 레이아웃 모듈은 우리가 원하는 순서나 방향에 따라 플렉스 항목들이 나타나게 할 수 있고 실제 마크업된 순서와 상관없이 별개로 동작하기 때문에 접근성에 제약을 받지 않는다는 점입니다.

또한 플렉스 박스 모듈은 정렬을 제어하는 능력을 가지고 있습니다. 

너비와 간격을 대등하게 하고 또 단의 높이를 동일하게 할 수 있으며 수직 정렬(vertical align)도 간단히 제어할 수 있습니다.

플렉스박스 모듈은 그 내용이 상당하고 새로운 속성들과 값들에 대해 검토해야 할 부분이 꽤 많지만 곧 다가올 미래를 준비한다면 이 플렉스박스를 활용하여 레이아웃에 관한 여러 문제들을 처리하게 될 것입니다.

display: flex (플렉스 서식 환경 구성하기)

플렉스박스 모듈은 display를 위해 두 개의 값을 새롭게 제시하고 있습니다.

이 값들은 요소를 블럭(block) 또는 인라인(inline) 레벨의 플렉스 컨테이너로 전환 시킬 수 있습니다.

이 모듈이 매우 많은 속성들을 제시하고는 있지만 IE와 그 밖의 브라우저에서 사용하는 flex 속성이 사용법이 조금 다르기 때문에 기존 속성(레거시)에 대해서도 알아볼 필요가 있을 것입니다.

예를 들어 IE는 display: flexbox를 지정하고 다른 브라우저는 display: box를 지정합니다. 또는 접두사(vendor-prefix)를 붙여서 사용하기도 합니다.

아래 링크를 참조하여 flexbox에 대해 좀 더 살펴보길 바랍니다.

• CSS 플렉스박스 레이아웃 사양서
• flexbox 완벽 가이드(css-tricks)
• flexbox의 신/구 버전 차이점 알아보기
• flexbox 구버전과 신버전의 브라우저 지원을 위한 최고의 방법
•  IE flexbox 참고자료

앞서 언급했듯이 flexbox의 콘텐츠(플렉스 항목)는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 합니다.

이 속성을 요소에 적용할 때 이 display 값들은 콘텐츠를 위해 새로운 플렉스 서식 환경(flex formatting context)를 만들게 되고 그것이 바로 플렉스 항목이 됩니다.

flexbox 레이아웃을 구성할 때는 콘텐츠(플렉스 항목)를 감싸는 부모 요소에 이 속성을 지정합니다.

html

<div class="container">
  <nav></nav>
  <section></section>
  <aside></aside>
</div>

<style>
.container {display:flex;}
</style>

위 display: flex; 규칙에 의해 컨테이너를 플렉스 컨테이너로 전환시켰으며 이 코드에 의해서 플렉스 서식 환경이 구성됩니다.

이때 플렉스 컨테이너 안의 콘텐츠(<nav>, <section>, <aside>)는 플렉스 항목이 되는 것입니다.

일반적으로 동일한 크기의 항목들을 잘 배열하려면 각 항목들을 float 상태로 만들어야 하고 융통성이 없는 height 값을 부여하고 또 컨테이너가 흐트러지지 않도록 float 상태를 clear해야 합니다. 그러나 앞에서 제시한 flex 값으로 정렬뿐만 아니라 훨씬 더 많은 플렉스박스의 기능들이 활성화될 수 있게 합니다. (플렉스박스 기능들에 대해서는 계속 설명..)

• IE10 에서는 -ms-display: flexbox 와 같이 사용해야 합니다.

지원 현황

IE	크롬	파이어 폭스	사파리	오페라
IE10+(hybrid)	CH21 이상(modern),  CH20 이하(old),  An2.1 이상(old)	FF2~21(old), FF22이상(modern)	SF3.1 이상(old),  iOS3.2 이상(old)	O12 이상(modern)

flex-direction - 방향, 흐름, 시각적인 순서처리

먼저 플렉스 서식 환경에서 요소가 구성되는 방향과 흐름에 대한 개념을 먼저 살펴본 후 플렉스박스가 레이아웃의 심미적인 부분에 어떻게 관여하는지를 살펴보도록 하겠습니다.

flex-direction 속성은 요소의 흐름 방향을 제어하는 것으로, 즉 플렉스 항목들이 오른쪽, 왼쪽, 아래쪽, 위쪽 방향 중 어느 쪽으로 정렬(배열)되어야 하는지를 제어하게 됩니다.

flex-direction 속성의 기본값은 row 이고, 이는 서양식 쓰기 방식(왼쪽에서 오른쪽, 위에서 아래쪽 쓰기)을 기본으로 하여 플렉스 항목들이 나열되도록 합니다.

css

.container {
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  width: 200px;
}

이 값은 전체 플렉스 항목들의 흐름 방향을 제어하기 때문에 플렉스 항목이 아닌 플렉스 컨테이너에 지정해야 합니다.

flex-direction 속성값

• row : 기본값이고, 왼쪽에서 오른쪽으로 나열한다.  (→)
• row-reverse  : 오른쪽에서 왼쪽으로 나열한다. (←)
• column : 항목들을 수직으로 위쪽에서 아래쪽을 향해 나열한다. (↓)
• column-reverse  : 항목들을 수직으로 아래쪽에서 위쪽으로 나열한다. (↑)

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE11	29.0	FF28.0	6.1(prefix 필요)	12.1

• prefix 를 이용하여 FF 18.0은 -moz-, Safari 6.1, Chrome 21.0은 -webkit- 을 이용해 지원할 수 있다.

flex-direction DEMO VIEW

flex-wrap

flex-wrap은 플렉스 항목들이 열을 바꾸는 방법을 제어하는 속성, 즉 flex item을 감쌀(wrap) 것인지 아닌지를 지정합니다.

이 값이 적용되면 항목들이 여러 개의 열로 나뉘지 않고 여러 항목들이 너비를 조정해서 하나의 열 안아 모두 끼워 넣어지게 됩니다.

다시 말해, 항목의 수가 늘어나도 열을 바꾸지 않고 한 줄로 늘어서게 됩니다. (white-space: nowrap 과 유사)

css

div {
  display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;   
  flex-wrap: wrap;
}

이 속성 역시 플렉스 컨테이너에 지정해야 합니다.

flex-wrap 속성값

• nowrap : 기본값으로 플렉스 항목들이 wrap 되지 않도록 지정합니다.
• wrap : 플렉스 항목들이 컨테이너 안에서 여러 줄로 열 바꿈을 할 수 있게 허용합니다.
• wrap-reverse : wrap으로 생기는 정렬(나열)방향이 그 반대로 나열하게 됩니다.
• initial : 디폴트 값으로 이 속성을 설정합니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE11	29.0	FF 28.0	6.1(prefix 필요)	12.1

• prefix 를 이용하여 FF 18.0은 -moz-, Safari 6.1, Chrome 21.0은 -webkit- 을 이용해 지원할 수 있다.

flex-wrap DEMO VIEW

flex-flow

이 속성은 앞서 설명했던 flex-direction과 flex-wrap 값을 명시하는 단축 속성입니다.

flex-flow는 두 개의 인자(매개변수)를 순서에 상관없이 지정할 수 있고 둘 중의 하나를 생략하는 것도 가능합니다.

css

div {
  display: -webkit-flex; /* Safari */
  -webkit-flex-flow: row-reverse wrap; /* Safari 6.1+ */
  display: flex;
  flex-flow: row-reverse wrap;
}

플렉스 컨테이너에 이 속성을 지정합니다.

flex-flow 속성값

• flex-direction : 인자 순서에 상관없이 flex-direction 속성값을 사용할 수 있습니다. (플렉스 항목 방향 지정)
• flex-wrap : 인자 순서에 상관없이 flex-wrap 속성값을 사용할 수 있습니다.

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE11	29.0	FF 28.0	6.1(prefix 필요)	12.1

• prefix 를 이용하여 FF 18.0은 -moz-, Safari 6.1, Chrome 21.0은 -webkit- 을 이용해 지원할 수 있다.

flex-flow DEMO VIEW

flex

flex는 플렉스 컨테이너 내부의 플렉스 항목들의 길이를 지정할 수 있고 각 항목 사이에 배분되는 여유 공간은 다음 세 가지 인자에 의해서 결정됩니다.

즉, 초기 기본 너비, 확장 인자, 감소 인자가 바로 그것입니다.

다시 말해, 뒤에서 소개할 flex-grow, flex-shrink, flex-basis 의 축약 속성으로 플렉스 아이템에 대한 속성값을 지정합니다.

기본값은 0 1 auto 입니다.

css

/* flex : flex-grow flex-shrink flex-basis */
#main div {
  -webkit-flex: 1; /* Safari 6.1+ */
  -ms-flex: 1; /* IE 10 */ 
  flex: 1;
}

이 속성은 플렉스 컨테이너가 아닌 플렉스 항목에 지정해야 합니다.

flex 속성값

• flex-grow : 플렉스 항목들이 차지할 너비들에 대한 증가형 숫자를 지정합니다.
• flex-shrink : 플렉스 항목들이 차지할 너비들에 대한 감소형 숫자를 지정합니다.
• flex-basis : item의 길이를 지정합니다.
• auto : 1 1 auto 와 같습니다.
• initial : 0 1 auto 와 같습니다.
• none : 0 0 auto 와 같습니다.

flex 속성의 일반적인 사용 사례와 작용

일반적인 값	단축되지 않은 표기 flex : <grow> <shrink> <basis>	작용
flex: innitial;	flex: 0 1 auto;	항목의 크기는 width/height 속성에 의해 결정된다. 여유 공간으로 그 크기를 늘릴 수는 없지만 공간이 부족할 경우 줄일 수는 있다.
flex: auto;	flex: 1 1 auto;	항목의 크기는 width/height 속성에 의해 결정된다. 하지만 완전히 유연한 형태여서 여유 공간으로 크기를 늘릴 수도 있고 공간이 부족할 경우 줄일 수도 있다.
flex: none;	flex: 0 0 auto;	항목의 크기는 width/height 속성에 의해 결정된다. 그리고 전체적으로 유연하지 못하여 늘이거나 줄이는 것이 불가능하다.
flex: <pos-num>	flex: <pos-num> 1 0;	flex-basis 가 0으로 설정되어서 모든 여유 공간은 구체적으로 명시된  grow(<pos-num>)값을 근거로 항목들에 골고루 분배된다.

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE11	29.0	FF 28.0	6.1(prefix 필요)	12.1

• prefix 를 이용하여 FF 18.0은 -moz-, Safari 6.1, Chrome 21.0은 -webkit- 을 이용해 지원할 수 있다.

flex-grow

flex-grow 속성은 양수 정수값을 수용하고 이 값은 남는 공간 중 얼마를 지정된 플렉스 항목에 분배해야 하는지 그 정도를 제어합니다. 

그래서 해당 항목이 플렉스 컨테이너상의 다른 항목들에 비해서 얼마나 확장할 지를 결정합니다.

기본값은 0 이다.

css

/* Safari 6.1+ */
div:nth-of-type(1) {-webkit-flex-grow: 1;}
div:nth-of-type(2) {-webkit-flex-grow: 3;}
div:nth-of-type(3) {-webkit-flex-grow: 1;}

/* Standard syntax */
div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}

flex-grow 속성값

• number : 증가시킬 값을 숫자로 지정합니다. 기본값은 0 이다.
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE11	29.0	FF 28.0	6.1(prefix 필요)	12.1

• prefix 를 이용하여 FF 18.0은 -moz-, Safari 6.1, Chrome 21.0은 -webkit- 을 이용해 지원할 수 있다.

flex-grow DEMO VIEW

flex-shrink

flex-shrink 속성 역시 정수값을 갖습니다. 이것은 모자라는 공간을 회수할 때 해당 플렉스 항목이 플렉스 컨테이너상의 다른 항목들에 비해 얼마나 줄어들지를 결정합니다.

기본값은 1 이다.

css

/* Safari 6.1+ */
div:nth-of-type(2) {
  -webkit-flex-shrink: 3; 
} 

/* Standard syntax */
div:nth-of-type(2) {
  flex-shrink: 3;
}

flex-grow와 마찬가지로 플렉스 항목에 속성을 지정해야 합니다.

flex-shrink 속성값

• number : 감소시킬 값을 숫자로 지정합니다. 기본값은 1 이다.
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터의 값을 상속 받습니다.

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE11	29.0	FF 28.0	6.1(prefix 필요)	12.1

• prefix 를 이용하여 FF 18.0은 -moz-, Safari 6.1, Chrome 21.0은 -webkit- 을 이용해 지원할 수 있다.

flex-shrink DEMO VIEW

flex-basis

flex-basis 속성은 너비 값을 수용하고 플렉스 항목의 초기 크기를 설정합니다.  이후 남는 공간은 증가/감소(grow/shrink) 인자들을 근거로 분배됩니다.

즉, 플렉스 항목의 기본값을 지정하는 것이고 기본값은 auto 입니다.

css

div:nth-of-type(2) {
  -webkit-flex-basis: 80px; /* Safari 6.1+ */
  flex-basis: 80px;
}

이 값 역시 플렉스 항목에 지정해야 합니다.

flex-basis 속성값

• number : 플렉스 아이템의 기본값을 px,pt 등의 길이 단위 또는 %(퍼센테이지)로 지정할 수 있습니다.
• auto : 기본값으로, 길이는 플렉스 항목(flexible item) 길이와 같습니다.
• initial : 이 속성의 기본값을 따릅니다.
• inherit : 부모 요소로부터 값을 상속 받습니다.

지원 현황

IE	크롬	파이어폭스	사파리	오페라
IE11	29.0	FF 28.0	6.1(prefix 필요)	12.1

• prefix 를 이용하여 FF 18.0은 -moz-, Safari 6.1, Chrome 21.0은 -webkit- 을 이용해 지원할 수 있다.

flex-basis DEMO VIEW

위의 내용을 숙지했다면 플렉스 박스가 무엇인지에 대해 충분히 인지했으리라 봅니다.

그렇지만 이것이 전부가 아니라 더욱 놀라운 것들이 아직 남아 있습니다.

다음 포스팅에서 플렉스 박스에 대해 알아볼 필요가 있는 속성들에 대해 좀 더 살펴보겠습니다.

Related Info

1. 플렉스 박스 #2

Jaehee's WebClub

1. Flexible box Layout: 유연한 상자 레이아웃 [본문으로]