[HTML5 & CSS3] 플렉스 박스 레이아웃

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

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

​

​

​

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

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

​

<style>
   #container {
      display:flex;
   }
</style>
<div id="container">
<div></div>
<div></div>
</div>

 

​

​

*display 속성과 브라우저 접두사

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

하지만 브라우저마다 플렉스 박스를 지원하는 방법이 달라 브라우저 접두사를 붙여야 한다. 특히 플렉스 컨테이너를 지정하는 display 속성의 경우, 접두사가 상당히 복잡하다. 브라우저 버전에 따라 다음과 같이 브라우저 접두사를 붙여 표시한다.

​

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

 

​

​

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

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

​

기본형)

flex-direction: row | row-inverse | column | column-inverse

 

속성 값	설명
row	주축을 가로로 교차축을 세로로 지정한다. 플렉스 항목은 주축 시작점에서 끝점으로(왼쪽에서 오른쪽으로) 배치된다.
row-inverse	주축을 가로로 교차축을 세로로 지정한다. 플렉스 항목은 주축 끝점에서 시작점으로(오른쪽에서 왼쪽으로) 배치된다.
column	주축을 세로로 교차축을 가로로 지정한다. 플렉스 항목은 주축 시작점에서 끝점으로(위쪽에서 아래쪽으로) 배치된다.
column-inverse	주축을 세로로 교차축을 가로로 지정한다. 플렉스 항목은 주축 끝점에서 시작점으로(아래쪽에서 위쪽으로) 배치된다.

플렉스 항목 가로로 배치하기

<style>
   #container {
      display:flex; /* 기본 값 row로 플렉스 컨테이너 지정 */
   }
   #container div {
      width:200px;
      border: 2px solid black;
      background:#ccc;
   }
</style>
<div id="container">
<div id="box1"><h2>1</h2></div> /* 플렉스 항목들 */
<div id="box2"><h2>2</h2></div> /* 플렉스 항목들 */
<div id="box3"><h2>3</h2></div> /* 플렉스 항목들 */
</div>

 

플렉스 항목 세로로 배치하기

<style>
   #container
      display: flex;
      flex-direction: column;
   }
</style>

 

​

​

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

기본적으로 플렉스 항목들은 주축 방향을 따라 한 줄로 배치된다. 하지만 flex-wrap 속성을 사용하면 플렉스 항목을 여러 줄에 걸쳐 표시한다.

​

기본형)

flex-wrap: no-wrap | wrap | wrap-reverse

 

속성 값	설명
no-wrap	플렉스 항목들을 한 줄에 표시한다.
wrap	플렉스 항목을 여러 줄에 표시한다.
wrap-reverse	플렉스 항목을 여러 줄에 표시하되 기존 방향과 반대로 배치한다.

​

플렉스 항목 왼쪽에서 오른쪽으로 배치하기

<style>
   #container {
      display: flex;
      flex-wrap: wrap;
   }
</style>

 

플렉스 항목 오른쪽에서 왼쪽으로 배치하기

<style>
   #container {
      display: flex;
      flex-wrap: wrap-reverse;
   }
</style>

 

​

​

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

플렉스 박스를 이용해 항목들을 배치할 때 기본이 되는 방향과 여러 줄 배치 여부는 flew-flow 속성을 이용해 한꺼번에 지정할 수 있다. 이때 플렉스 배치 방향과 여러 줄의 배치 방법을 공백 문자로 구분해 표시한다. 기본 값은 flew-flow:row no-wrap이며 다음과 같이 지정할 수 있다.

​

기본형)

flex-flow: <플렉스 방향> <플렉스 줄 배치>

 

​

​

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

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

order 값이 0이라면 소스에 입력한 순서대로 배치되고 order 값을 숫자로 하면 그 순서에 따라 배치된다. 이때 order 속성은 플렉스 컨테이너가 아니라 플렉스 항목에서 지정해야 한다.

​

기본형)

order : 0 | 숫자

 

<style>
   #container {
      display:flex;
   }
   #box1 {
      order:2;
   }
   #box2 {
      order:3;
   }
   #box3 {
      order:1;
   }
</style>
<div id="container">
<div id="box1"><h2>box1</h2></div>
<div id="box2"><h2>box2</h2></div>
<div id="box3"><h2>box3</h2></div>
</div>

 

​

​

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

flex 속성은 플렉스 항목의 너비를 늘이거나 줄일 수 있도록 세 가지 값을 이용해 표시한다. 첫 번째 숫자는 늘릴 비율, 두 번째 숫자는 줄일 비율, 세 번째 숫자는 기본 값이다.

​

기본형)

flex : [<flex-grow> <flex-shrink> <flex-basis> | auto | initial

 

속성 값	설명
<flex-grow> <flex-shrink> <flex-basis>	플렉스 항목의 너비를 얼마나 늘일지 숫자로 지정한다.
	플렉스 항목의 너비를 얼마나 줄일지 숫자로 지정한다.
	플렉스 항목의 기본 크기를 지정한다. width 속성처럼 너비 값을 지정할 수도 있고 0이나 auto를 지정할 수도 있다. 0일 경우 flex-grow와 flex-shrink의 인수 값을 함께 사용하고 auto일 경우, 플렉스 항목의 너비 값을 사용한다.
initial	항목의 width/height 값에 의해 크기가 결정되는데 플렉스 컨테이너의 공간이 부족할 경우, 최소 크기까지 줄인다.
auto	항목의 width/height 값에 의해 크기가 결정되지만 플렉스 컨테이너의 공간에 따라 늘이거나 줄인다.

​