CSS Flex 속성

flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다.

display:flex

블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다.

과거 문법 display: box(old)와 같이 사용되다가 비공식적인 문법으로 display: flexbox(hybrid)와 같이 사용되었다. 근래에 명세에는 display: flex(modern)가 되었다.

IE와 그 밖의 브라우저에서 사용하는 flex 속성이 사용법이 조금 다르다. IE는 display: flexbox를 지정하고 다른 브라우저는 display: flex를 지정한다. 아래에 링크를 참조하여 flexbox를 살펴볼 수 있도록 하자.

• flexbox 완벽 가이드
• flexbox 구버전과 신버전 브라우저 지원을 위한 최고의 방법
• IE flexbox 참고 자료

flexbox 레이아웃을 구성할때 콘텐츠를 감싸는 부모요소에 이 속성을 지정한다.

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

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

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

지원 현황

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

Blackberry 브라우저 10 이상은 modern 문법을 지원한다.

flex

flex 속성은 flex-grow, flex-shrink, flex-basis의 축약속성으로, 같은 컨테이너안쪽에 flexible item들에 대한 속성값을 지정한다. 기본값은 0 1 auto이다.

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

속성값

• flex-grow : flexible item들이 차지할 너비들에 대한 증가형 숫자를 지정한다.
• flex-shrink : flexible item들이 차지할 너비들에 대한 감소형 숫자를 지정한다.
• flex-basis : item의 길이를 지정한다.
• auto : 1 1 auto와 같다.
• initial : 0 1 auto와 같다.
• none : 0 0 auto와 같다.
• inherit : 부모 요소로부터 값을 상속 받는다.

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE11	FF28.0	SF6.1(prefix 필요)	CH29.0	O12.10

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

flex-grow

flexible item들이 차지할 너비들에 대한 증가형 숫자를 지정한다. 기본값은 0이다.

/* 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;}

속성값

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

flex-grow 데모 보기

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE11	FF28.0	SF6.1(prefix 필요)	CH29.0	O12.10

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

flex-shrink

flexible item들이 차지할 너비들에 대한 감소형 숫자를 지정한다. 기본값은 1이다.

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

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

속성값

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

flex-shrink 데모 보기

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE11	FF28.0	SF6.1(prefix 필요)	CH29.0	O12.10

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

flex-basis

flexible item의 기본값을 지정한다. 기본값은 auto이다.

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

속성값

• number : flexible item의 기본값을 px,pt등의 길이 단위 혹은 퍼센테이지(%)로 지정한다.
• auto : 기본값으로, 길이는 flexible item의 길이와 같다.
• intial : 이 속성의 기본값을 따른다.
• inherit : 부모 요소로부터 값을 상속 받는다.

flex-basis 데모 보기

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE11	FF28.0	SF6.1(prefix 필요)	CH29.0	O12.10

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

flex-flow

flex-flow 속성은 flex-direction, flex-wrap 속성의 축약속성이다.

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

속성값

• flex-direction : flexible item의 방향을 지정한다.
• flex-wrap : flexible item을 wrap 할것인지 아닌지를 지정한다.
• initial : 디폴트 값으로 이 속성을 설정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

flex-flow 데모 보기

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE11	FF28.0	SF6.1(prefix 필요)	CH29.0	O12.10

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

flex-direction

CSS3에 추가된 속성으로 flexible item이 flex 컨테이너 안에 위치되는 방법을 지정한다.

div {
  display: flexbox;
  flex-direction: row;
  width: 200px;
}

속성값

• row : 기본값으로, 행으로 수평방향으로 왼쪽에서 오른쪽으로 정렬한다.
• row-reverse : 행으로 수평방향으로 오른쪽에서 왼쪽으로 정렬한다.
• column : 열로 수직방향으로 위에서 아래로 정렬한다.
• column-reverse : 열로 수직방향으로 아래에서 위로 정렬한다.
• initial : 디폴트 값으로 이 속성을 설정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

flex-direction 데모 보기

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE11	FF28.0	6.1(prefix 필요)	29.0	12.10

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

flex-wrap

flexible item을 wrap 할것인지 아닌지를 지정한다.

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

속성값

• nowrap : 기본값으로, flexible item이 wrap 되지 않도록 지정한다.
• wrap : 만일 필요하다면 flexible item을 wrap한다.
• wrap-reverse : 만일 역순으로 flexible item을 wrap할 필요가 있을때 지정한다.
• initial : 디폴트 값으로 이 속성을 설정한다.
• inherit : 부모 요소로부터 값을 상속 받는다.

flex-wrap 데모 보기

지원 현황

인터넷익스플로우	파이어폭스	사파리	크롬	오페라
IE11	FF28.0	6.1(prefix 필요)	29.0	12.10

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