CSS - 플렉스박스(Flexbox) 시작하기

플렉시블 박스(Flexible box)라고 부르는 플렉스 박스(flexbox) 레이아웃은 일반적으로 처리하기 까다로운 레이아웃을 쉽게 처리할 수 있습니다.

불과 몇 해전만 하더라도 float 나 position 을 이용해 레이아웃을 어렵게 구성해야 했습니다.

하지만 플렉시블 박스가 등장하면서 일정하게 공간을 배분하거나 원하는 방향으로 정렬할 수 있게 되었습니다. 뿐만 아니라 복잡한 레이아웃도 flexbox 를 이용하면 쉽게 구현이 된다는 점입니다.

플렉스 박스를 지원하는 브라우저는 IE 11, 크롬 29, 사파리 7, 파이어폭스 28, 오페라 20, 안드로이드 4.4, IOS 사파리 7, 블랙 베리 등 최신 웹 브라우저에서만 사용이 가능합니다.

플렉스 컨테이너와 플렉스 항목

Flexbox 레이아웃에서 가장 중요하게 다뤄지는 컴포넌트가 Flex Container 와 Flex items 입니다.

Flex Container 는 부모 요소이고, Flex items 은 자식 요소입니다. Container 는 item 을 정렬하기 위해 반드시 Container 가 있어야 합니다.

Flexbox 속성 중 일부는 Container 에 적용되고 다른 Flex 속성은 item 에 적용됩니다.

예를 들어 Flex Container 는 Container 와 item 을 정렬하기 위해 사용되며, display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content 속성을 이용합니다.

Flex items 은 Flex Container 안에서 Flex Line 이라는 가상의 선을 따라 정렬되기 때문에 Flex Container 와 구분됩니다. order, align-self, flex 속성을 이용할 수 있습니다.

Display 속성

플렉스 컨테이너는 Display 의 속성에 의해 제어되기 때문에 Display 속성의 값에 따라 Container 를 수평(또는 수직) 방향으로 정렬할 수 있습니다.

값	설 명
flex	Container 를 Block 요소와 동일하게 세로 방향으로 쌓음 (위에서 아래 방향으로 정렬)
inline-flex	Container 를 Inline-Block 요소와 동일하게 가로 방향으로 쌓음 (왼쪽에서 오른쪽 방향으로 정렬)

Display : flex 로 설정했을 때

display: inline-flex 로 설정했을 때

container 박스를 inline-block 으로 설정한 결과입니다.

<style>
.container {
  display: inline-flex;
  background-color: #efefef;
  height: 150px;
  padding: 10px;
  margin: 10px;
}
.container div {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>

<div class="container">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="container">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>

플렉스 축

책이나 다른 블로그에서 여러 번을 보더라도 주 축과 교차 축이라는 두 개의 의미를 단번에 이해하기란 쉬운 일은 아니지만 일단 짚고 넘어갈 필요는 있습니다.

block 및 inline 방향을 기반으로 하는 레이아웃과 달리 플렉스 레이아웃은 플렉스 방향을 기반으로 합니다.

플렉스 방향의 개념은 플렉스 항목이 배치되는 방향을 결정하는 축의 개념을 기반으로 합니다. 다음 그림은 플렉스 컨테이너에 정의된 축을 보여줍니다.

주 축은 다음 표의 flex-direction 속성의 값에 따라 결정됩니다.

속 성	설 명
flex-direction	Item 이 배치될 방향을 설정 row: 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 배치. 기본값. row-reverse: 오른쪽에서 왼쪽으로 배치. column: 위에서 아래로 배치. column-reverse: 아래에서 위로 배치.
flex-wrap	넘치는 item을 줄 바꿈 할지를 설정. nowrap: item 을 한 줄로 배치. 기본값.   (item 의 너비를 줄여서라도 모두 한 줄에 배치)  wrap: 넘치는 item 을 자동으로 줄 바꿈 하여 배치. wrap-reverse: 넘치는 item 을 역방향으로 줄 바꿈 하여 배치
flex-flow	Item 이 배치될 방향과 넘치는 item 을 다음 줄로 넘길지 설정. (flex-direction 와 flex-wrap 의 단축 속성) flex-flow 는 [flex-direction] [flex-wrap] 의 순서로 설정. 기본값: flex-flow: row nowrap Ex.) flex-flow: column wrap;

flex-direction 속성의 값을 row 나 row-reverse 로 하면 인라인 모양이 되면서 수평 방향으로 정렬이 됩니다. 이 때 주 축은 수평이 되고, 교차 축은 수직이 되므로 item 은 위에서 아래로 배치됩니다.

반대로 flex-direction 의 값을 column 으로 하면 item 이 위에서 아래로 정렬이 됩니다. 이 때 주 축은 수직이고, 교차 축은 수평이 되므로 item 은 왼쪽에서 오른쪽으로 배치됩니다.

이렇듯 방향에 따라 주 축과 교차 축이 달라집니다. 

이제 예제를 하나 보도록 합시다. flex-direction 의 주 축을 각각 수평과 수직으로 했을 때의 결과입니다.

<style>
.container1, .container2 {
  background-color: #efefef;
  width: 150px;
  height: 150px;
  padding: 10px;
  margin: 10px;

  display: flex;
}

.container1 { flex-direction: row; }
.container2 { flex-direction: column; }

.container1 div, .container2 div {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>

<div class="container1">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<div class="container2">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>

Container1 의 주 축을 수평으로 했을 때 item 은 수직으로 정렬되고, Container2 의 주 축을 수직으로 했을 때 item 이 수평으로 정렬되는 것을 확인할 수 있습니다.

<style>
.container1, .container2 {
  background-color: #efefef;
  width: 150px;
  height: 150px;
  padding: 10px;
  margin: 10px;

  display: flex;
}

.container1 {
  flex-direction: row;
  flex-wrap : wrap;
}

.container2 {
flex-direction: column;
  flex-wrap: wrap;
}
.container1 div, .container2 div {
  width: 50px;
  height: 50px;
  border: 1px solid #000;
  background-color: yellow;
  text-align: center;
}
</style>

<div class="container1">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>
<br><br><br><br>
<div class="container2">
  <div>A</div><div>B</div><div>C</div><div>D</div>
</div>

플렉스 라인

플렉스 컨테이너의 플렉스 항목은 컨테이너 안에서 플렉스 항목을 그룹화하고 정렬하는데 사용되는 가상의 선인 플렉스 라인 내에 배치되고 정렬됩니다. 

Flex Line 은 주 축을 따릅니다. 플렉스 컨테이너는 flex-wrap 속성에 따라 single-line 일 수 있고, multi-line 일 수 있습니다.

	설 명
single-line	Container 는 item 을 한 줄로 정렬하면 item 이 컨테이너를 벗어나더라도 모든 자식을 한 줄로 정렬합니다.
multi-line	Container 는 item 수가 많거나 너무 크면 여러 줄에 걸쳐 item 을 나누어 새로운 라인을 생성합니다. flex-wrap 속성에 의해 결정되며 교차 축에 따라 Container 에 쌓입니다. Container 자체가 완전히 비어 있지 않으면 모든 라인에 하나 이상의 item 이 포함됩니다.