[CSS3] flex 속성 사용하기

CSS3 기술인 flex 에 관한 정리를 하려 합니다. 

flex를 사용하기 위하여 크게 감싸고 있는 부모요소에 적용해야 할것과

자식요소에 적용할 부분을 나눠서 설명하도록 하겠습니다.

우선 기본코드는 아래와 같습니다.

HTML

<div class="conbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.conbox{
    width:500px;
    height:300px;

    -ms-display:flexbox;
    display:-webkit-flex; /* Safari */
    display:flex;

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

.conbox div{
    -webkit-flex:1;
    -ms-flex:1;
    flex:1;
}

.conbox div:nth-child(1){
    background:blue;
}
.conbox div:nth-child(2){
    background:red;
}
.conbox div:nth-child(3){
    background:green;
}
.conbox div:nth-child(4){
    background:yellow;
}

화면

flex 설정으로 4개의 컬럼이 설정 됩니다. 이는 감싸고 있는 부모의 width 값을 기준으로 분할을 하게 됩니다.

그리드적인 화면의 Layout 을 잡을때 많이 유용하다고 봅니다.

그럼 좀더 상세한 flex 요소에 대하여 설명 하겠습니다.

아까 말했듯이 flex를 사용하기 위해선 부모요소에 적용해야할 속성과 자식요소에게 적용해야할 속성 이 두가지로 크게 나누도록 하겠습니다.

---

부모요소

기본적으로 flexbox 레이아웃을 사용할 시 최대한의 크로스 브라우징을 위하여 부모요소에 아래와 같이 적용해야 합니다.

.conbox{
    -ms-display:flexbox; /* IE 10 */
    display:-webkit-flex; /* Safari */
    display:flex;
}

flex-flow

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

flex-direction : flexible item의 방향을 지정한다.

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

initial : 디폴트 값으로 이 속성을 설정한다.

inherit : 부모 요소로부터 값을 상속 받는다.

- flex-direction

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

flex-direction:row; //본값으로, 행으로 수평방향으로 왼쪽에서 오른쪽으로 정렬한다.

flex-direction:row reverse; // 행으로 수평방향으로 오른쪽에서 왼쪽으로 정렬한다.

flex-direction:column; // 열로 수직방향으로 위에서 아래로 정렬한다.

flex-direction:column-reverse; // 열로 수직방향으로 아래에서 위로 정렬한다.

flex-direction:initial; // 디폴트 값으로 이 속성을 설정한다.

flex-direction:inherit; // 부모 요소로부터 값을 상속 받는다.

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

- flex-wrap

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

flex-wrap:nowrap; // 기본값으로, flexible item이 wrap 되지 않도록 지정한다.

flex-wrap:wrap; // 만일 필요하다면 flexible item을 wrap한다.

flex-wrap:wrap-reverse; // 만일 역순으로 flexible item을 wrap할 필요가 있을때 지정한다.

flex-wrap:initial; // 디폴트 값으로 이 속성을 설정한다.

flex-wrap:inherit; // 부모 요소로부터 값을 상속 받는다.

---

자식요소

.conbox div{
    -webkit-flex:1; // Safari 6.1+
    -moz-flex:1; // Firefox 18.0
    -ms-flex:1; // IE 10
    flex:1;
}

flex

• IE 9 이전 버전은 flex 속성을 지원하지 않습니다.
• IE 11 이상의 버전에서는 flex 를 완벽 지원합니다. (-ms- 접두사는 필요 없습니다.)
• Safari 6.1 (이상)은 -webkit-flex 속성을 지원합니다.

flex:auto; // 1 1 auto와 같다.

flex:initial; // 0 1 auto와 같다. (디폴트 값으로)

flex:none; // 0 0 auto와 같다.

flex:inherit; // 부모 요소로부터 값을 상솟 받는다.

flex 속성은 flex-grow, flex-shrink, flex-basis의 축약속성

- flex-grow

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

.conbox div{
    -webkit-flex-grow:1;
    flex-grow:1;
}

- flex-shrink

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

.conbox div{
    -webkit-flex-shrink:3;
    flex-shrink:3;
}

- flex-basis

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

.conbox div{
    -webkit-flex-basis:80px;
    flex-basis:80px;
}