웹디자이너라면 꼭 알아야 할 Flexbox Layout

웹디자인을 하면서 레이아웃을 잡는 방법에 대해서 시대별로 많은 변화가 있었습니다. Web이 나오기 시작한 초창기에는 Table을 이용하여 화면의 레이아웃을 잡았고 웹표준, 웹접근성이 이슈화 되면서 시멘틱한 마크업이 대세가 되면서 CSS의 DIV를 이용한 방법으로 레이아웃을 잡았습니다.
CSS3로 버전업이 되면서 레이아웃 구현애 대한 방법으로 Flexbox가 탄생하게 되었고 2017년 현재 레이아웃을 편리하게 구현하기 위해서는 Flexbox를 사용하여 구현하는 것이 최선이라 할 수 있습니다. 그래서 웹디자이너나 Frontend 개발자라면 꼭 이해를 하고 넘어가야 하는 요소입니다.

Flexbox의 브라우저별 지원 현황

브라우저별 Flex 지원은 현재 대부분의 브라우저가 지원하고 있다고 보면 되고 Internet Explorer나 사파리 브라우저 같은 경우는 prefix를 사용해서 적용해야 합니다.

Internet Explorer : IE10
파이어폭스 : FF28.0
사파리 : 6.1
크롬 : 29.0
오페라 : 12.10

Flexbox의 특징

W3C에서의 정식 명칭은 CSS Flexible Box Layout Module이라고 정의 하고 있으며 이름처럼 레이아웃을 유연하게 구현하는 모듈이라고 보면 됩니다. 예전에 레이아웃을 구현하기 위해서는 정식 사용법이 아닌 편볍처럼 복잡하게 구현을 했어야 했던것에 반해 Flexbox는 쉽게 레이아웃을 구현할 수 있습니다.

Flexbox

Flexbox는 Container와 Item으로 구성됩니다. Flex의 선언은 Container의 CSS에 display: flex로 선언을 해 줍니다.

IE10 인 경우는 flex 대신 display: flexbox 로 지정

.container { display: flex }

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Container 설정

Flex의 설정은 대부분 Container쪽에 지정을 합니다. Item에 지정하는 경우는 Item별로 개별지정할 때 주로 사용됩니다.

flex-direction

Container 안에 있는 Item을 어떤방향으로 나열할지를 지정합니다.

속성	설명
row	Item을 수평방향으로 좌에서 우로 나열함 (기본값)
row-reverse	Item을 수평방향으로 우에서 좌로 나열함
column	Item을 수직방향으로 상에서 하로 나열함
column-reverse	Item을 수직방향으로 상에서 하로 나열함

.container { 
    display: flex;
    flex-direction: row;
}

flex-wrap

Container 안에 있는 Item이 Container를 넘어설 때 줄바꿈을 할지 한 줄로 표현할지에 대해 지정합니다.

속성	설명
nowrap	Item을 줄바꿈하지 않고 한줄에 표시함 (기본값)
wrap	Item이 Container을 넘어설 경우 다음줄에 줄바꿈하여 표시함
wrap-reverse	Item이 Container을 넘어설 경우 역방향으로 줄바꿈하여 표시함

.container { 
    display: flex;
    flex-wrap: nowrap;
}

flex-flow

flex-direction과 flex-wrap를 flex-flow로 한 줄에 지정할 수 있습니다. 첫번째 요소는 flex-direction 의 설정값을, 두번째 요소는 flex-wrap의 설정값을 지정하면 됩니다.

.container { 
    display: flex;
    flex-flow: row wrap;
}

justify-content

Container안에 있는 Item들을 수평방향으로 정렬하는 방법을 지정합니다.

속성	설명
flex-start	Container안에 있는 Item들을 왼쪽으로 정렬함 (기본값)
flex-end	Container안에 있는 Item들을 오른쪽으로 정렬함
center	Container안에 있는 Item들을 수평방향의 중앙에 정렬함
space-between	Container안에 있는 Item들을 일단 양쪽끝에 붙히고 나머지 Item들을 일정간격으로 정렬함
space-around	Container안에 있는 Item들을 좌우 각각 일정간격으로 정렬함

.container { 
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

align-items

Container안에 있는 Item들을 수직방향으로 정렬하는 방법을 지정합니다.

속성	설명
flex-start	Container안에 있는 Item들을 상단에 정렬함 (기본값)
flex-end	Container안에 있는 Item들을 하단에 정렬함
center	Container안에 있는 Item들을 수직방향의 중앙에 정렬함
baseline	Container안에 있는 Item들을 baseline으로 정렬함
stretch	Container안에 있는 Item들을 Container의 높이와 동일하게 상하로 늘려서 상단과 하단에 정렬함

.container { 
    display: flex;
    flex-flow: row nowrap;
    align-items:flex-start;
}

align-content

Container안에 있는 Item들이 여러 줄로 표시될 때 수직방향으로 정렬하는 방법을 지정합니다.

속성	설명
flex-start	Container안에 있는 여러 줄의 Item들을 모두 상단에 정렬함 (기본값)
flex-end	Container안에 있는 여러 줄의 Item들을 모두 하단에 정렬함
center	Container안에 있는 여러 줄의 Item들을 모두 수직방향의 중앙에 정렬함
space-between	Container안에 있는 Item들의 줄을 일단 상단과 하단 끝에 붙히고 나머지 Item들을 일정간격으로 수직방향으로 정렬함
space-around	Container안에 있는 Item들의 줄을 일정간격으로 수직방향으로 정렬함
stretch	Container안에 있는 Item들의 줄의 높이를 Container의 높이와 맞게 늘려서 정렬함

Item 설정

위에는 Container에 대한 설정이라면 이제는 그 안에 있는 Item들에 대한 설정으로 Item의 넓이, 순서 등 Item의 개별적인 속성에 대한 설정 방법입니다.

order

Container안에서 Item의 순서를 지정합니다. 음수값도 사용할 수 있으며 숫자가 작을 수로 왼쪽에, 클수록 오른쪽에 위치합니다.

.container .item-1 { order: -1; }
.container .item-2 { order: 0; }
.container .item-3 { order: 1; }
.container .item-4 { order: 2; }

flex-grow

각 Item의 넓이를 배수로 지정을 합니다. item-1의 flex-grow가 1이고 item-2의 flex-grow가 2라면 item-2는 item-1보다 2배가 크게 됩니다. 기본값은 0 이며 음수는 사용하지 않습니다.

.container .item-1 { flex-grow: 1; }
.container .item-2 { flex-grow: 2; }
.container .item-3 { flex-grow: 0; }
.container .item-4 { flex-grow: 0; }

flex-shrink

flex-grow와 반대로 각 Item의 넓이를 배수로 빼집니다. item-1의 flex-grow가 1이고 item-2의 flex-grow가 2라면 item-2는 item-1보다 2배가 작게 됩니다. 기본값은 1 이며 음수는 사용하지 않습니다.

.container .item-1 { flex-shrink: 1; }
.container .item-2 { flex-shrink: 2; }
.container .item-3 { flex-shrink: 0; }
.container .item-4 { flex-shrink: 0; }

flex-basis

Item의 기본 크기값을 지정합니다.

.container .item-1 { flex-basis: 200px; }

flex

flex-grow와 flex-shrink, flex-basis를 flex로 한 줄에 지정할 수 있습니다. 첫번째 요소는 flex-grow 의 설정값을, 두번째 요소는 flex-shrink의 설정값을, 세번째 요소는 flex-basis의 설정값을 지정하면 됩니다.
기본값은 flex: 0 1 auto 입니다.

.container .item-1 { flex: 0 1 200px; }

align-self

지정된 Item의 독자적인 수직방향 정렬을 지정합니다. align-items의 속성과 동일하게 지정됩니다.

속성	설명
flex-start	Container안에 있는 지정된 Item을 상단에 정렬함
flex-end	Container안에 있는 지정된 Item을 하단에 정렬함
center	Container안에 있는 지정된 Item을 수직방향의 중앙에 정렬함
baseline	Container안에 있는 지정된 Item을 baseline으로 정렬함
stretch	Container안에 있는 지정된 Item을 Container의 높이와 동일하게 상하로 늘려서 상단과 하단에 정렬함

참조한 사이트

정리가 잘되어 있는 영문사이트 : https://css-tricks.com/snippets/css/a-guide-to-flexbox
공식 CSS 정의 사이트 (W3C) : https://www.w3.org/TR/2012/WD-css3-flexbox-20120322
정리가 잘되어 있는 한글사이트 : http://www.beautifulcss.com/archives/2812
beautifulcss가 정리한 DEMO : http://www.beautifulcss.com/wp/demo/flexbox

나만 모르는 이야기 : 연식은 만렙, 정보는 뉴비

이 블로그 검색