codeahn

반응형 웹 디자인을 구현하는 다른 방법은 '플렉스 박스(flex box)'를 이용한 플렉스 박스 레이아웃입니다. 미디어 쿼리를 사용해 반응형 레이아웃을 만들 때 CSS로 각 요소를 원하는 형태로 배치하려면 생각만큼 쉽지 않습니다.

플렉스 박스 레이아웃과 기본 속성들

플렉스 박스 레이아웃이란?

플렉스 박스 레이아웃(flex obx layout)이란 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것입니다. 이 플렉스 박스를 이용하면 여유 공간에 따라 너비나 높이 위치를 자유롭게 변형할 수 있습니다. 따라서 화면 크기에 따라 레이아웃의 배치나 크기를 조절해야 편리하게 사용할 수 있습니다.

1. 플렉스 컨테이너(flex container) - 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 유연하게 사용하려면 먼저 플렉스 컨테이너로 묶어 주어야 합니다.

2. 플렉스 항목(flex item) - 플렉스 컨테이너에 담기는 웹 요소입니다. 위의 그림에서 1~6번 항목이 해당합니다.

3. 주축(main axis) - 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향입니다. 기본적으로 주축은 왼쪽에서 오른쪽으로 수평 방향으로 배치합니다. 주축에서 플렉스 항목이 배치되기 시작하는 지점을 '주축 시작점', 배치가 끝나는 지점을 '주축 끝점'이라고 합니다.

4. 교차축(cross axis) - 교차축은 주축과 교차되는 방향입니다. 기본적으로 위에서 아래로 배치합니다. 교차축에서 배치가 시작되는 지점을 '교차축 시작점' 배치가 끝나는 지점을 '교차축 끝점'이라고 합니다.

display 속성 - 플렉스 컨테이너 지정하기

플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 합니다. 즉, 배치하려는 웹 요소들이 있다면 그 요소들을 감싸는 부모 요소를 만들고 그 부모요소를 플렉스 컨테이너로 만들어야 합니다. 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 플렉스 박스 형태를 지정해야 합니다.

display속성과 브라우저 접두사

플렉스 박스 레이아웃은 최신 모던 브라우저에서는 모두 지원되고 대부분의 구식 버전에서도 지원됩니다.

(http://caniuse.com/#feat=flexbox참고).

하지만 브라우저마다 플렉스 박스를 지원하는 방법이 달라 브라우저 접두사를 붙여야 합니다.

.wrapper {
    display:-webkit-box; /*iOS6이하, 사파리3.1*/
    display:-moz-box; /*파이어 폭스 19이하*/
    display:-ms-flexbox; /*IE 10*/
    display:-webkit-flex; /*웹킷 구 버전*/
    display: flex; /*표준 스펙*/
}

flex-direction속성 - 플렉스 방향 지정하기

플렉스 컨테이너를 지정했다면 플렉스 항목을 배치할 방향을 알려 주어야 합니다. flex-direction속성을 사용해 플렉스 항목의 주축을 가로(row)로 할지, 세로(column)로 할지 지정합니다. 따로 지정하지 않으면 기본 값인 row로 시작합니다

flex-wrap속성 - 플렉스 항목을 한 줄 또는 여러 줄로 배치하기

flex-flow 속성 - 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기

order 속성 - 플렉스 항목 배치 순서 바꾸기

플렉스 항목은 소스 코드에 입력한 순서대로 주축을 따라 배치되지만 order 속성을 이용하면 배치 순서를 바꿀 수 있습니다. 

flex 속성 - 플렉스 항목 크기 조절하기

flex 속성은 플렉스 항목의 너비를 늘이거나 줄일 수 있도록 세 가지 값을 이용해 표시합니다.

첫 번째 숫자는 늘릴 비율, 두 번째 숫자는 줄일 비율, 세 번째 숫자는 기본 값입니다.

flex:1 1 0; /* 늘이거나 줄이지 않음*/
flex:2 2 0; /* 2배 늘이거나 2배 줄임*/

플렉스 박스 항목 배치를 위한 속성들

justify-content 속성 - 주축 기준의 배치 방법 지정하기

플렉스 항목을 주축방향으로 배치할 때의 배치 기준을 지정할 수 있습니다.

align-item 속성 - 교차축 기준의 배치 방법 지정하기

slign-self 속성 - 교차축 기준의 배치 방법 지정하기

플렉스 항목을 개별적으로 배치할 수 있습니다.  플렉스 컨테이너에서 플렉스 항목 전체의 배치 방법을 결정하지만 align-self속성으로 특정 플렉스 항목만 배치 방법을 바꿀 수 있습니다. 따라서 이 속성은 항목 자체의 스타일로 지정합니다.

align-content속성 - 여러 줄일 때의 배치 방법 지정하기