Notice
Recent Posts
Recent Comments
Link
«   2024/10   »
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
Archives
Today
Total
관리 메뉴

web sprit

[CSS3] flex 속성 사용하기 본문

웹5/CSS3

[CSS3] flex 속성 사용하기

커드만 2017. 1. 12. 19:13

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


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

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

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

HTML

1
2
3
4
5
6
<div class="conbox">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
cs


CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
.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;
}
cs


화면


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

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


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

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





부모요소

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

1
2
3
4
5
.conbox{
    -ms-display:flexbox; /* IE 10 */
    display:-webkit-flex; /* Safari */
    display:flex;
}
cs


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; // 부모 요소로부터 값을 상속 받는다.





자식요소

1
2
3
4
5
6
.conbox div{
    -webkit-flex:1; // Safari 6.1+
    -moz-flex:1; // Firefox 18.0
    -ms-flex:1; // IE 10
    flex:1;
}
cs


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이다.

1
2
3
4
.conbox div{
    -webkit-flex-grow:1;
    flex-grow:1;
}
cs


- flex-shrink

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

1
2
3
4
.conbox div{
    -webkit-flex-shrink:3;
    flex-shrink:3;
}
cs


- flex-basis

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

1
2
3
4
.conbox div{
    -webkit-flex-basis:80px;
    flex-basis:80px;
}
cs


Comments