CSS 플렉스박스(Flexbox) - 2. 속성과 배치

플렉스박스 안의 아이템들은 가로 방향으로 한 줄(인라인)로 배치되는 것이 기본입니다.

가로 방향으로 갯수가 많아지면 요소들을 여러 줄로 배치해야 할 필요가 있고, 플렉스박스는 여러 줄로 배치를 할 수있도록 하는 여러가지 속성들을 추가로 제공합니다.

플렉스박스에서 사용 가능한 속성을 알아 보겠습니다.

플렉스박스 안의 아이템(들)에 사용 가능한 속성은 다음과 같습니다.

flex-wrap 속성

플렉스박스에 선언하는 속성입니다.

플렉스박스 안의 아이템들이 배치되는 흐름의 방향과 줄바꿈을 결정합니다.

여러 줄에 아이템을 배치할 필요가 있을 때 아이템들이 줄바꿈을 하면서 여러 줄에 걸쳐서 영역을 채워나가게 됩니다.

기본 값은 "nowrap" 이며 왼쪽 위 시작 위치에서부터 오른쪽 방향으로 한줄로 배치가 되며, 줄바꿈은 되지 않습니다. 나열된 아이템들의 너비 합이 플렉스박스 영역보다 클 경우, 각 아이템의 너비가 차지하는 비율에 맞춰서 아이템 너비를 줄여 한줄에 채워넣게 됩니다.

사용 가능한 flex-wrap 속성의 값은 다음과 같습니다.

속성 값	설명	예
nowrap	줄바꿈 없이 왼쪽 위 시작위치부터 오른쪽으로 아이템을 채웁니다. 아이템들의 너비 합이 플렉스박스 너비보다 클 경우, 아이템 최소 크기를 기준으로 크기값이 배분되어 플렉스박스 안에 배치됩니다.
wrap	왼쪽 위 시작 위치부터 아이템을 채우면서 한행씩 아래로 이동합니다.
wrap-reverse	왼쪽 아래 위치부터 아이템을 채우면서 한행씩 위로 이동합니다.

flex-direction 속성

플렉스박스에 선언하는 속성입니다.

아이템들을 배치하는 방향을 진행하며, 가로, 또는 세로 방향으로 아이템들이 배치되는 방향을 지정할 수 있습니다.

사용 가능한 속성 값은 다음과 같습니다.

속성 값	설명	예
row	왼쪽 위에서 오른쪽 방향으로 아이템 배치.
row-reverse	오른쪽 위에서 왼쪽 방향으로 아이템 배치.
column	왼쪽 위에서 아래 방향으로 아이템 배치.(한 행에 아이템 한 개 배치)
column-reverse	왼쪽 아래에서 위쪽 방향으로 아이템 배치.(한 행에 아이템 한 개 배치)

flex-wrap 과 flex-direction 속성은 조합해서 사용할 수 있으며, 조합해서 사용하면 다음과 같은 순서로 아이템 배치도 가능합니다.

flex-basis 속성

플렉스박스 아이템에 적용할 수 있는 속성입니다.

아이템의 기본 크기를 정합니다. 단위를 사용한 크기가 아닌 경우 

flex-basis 와 width 속성이 둘다 있는 경우 flex-basis에 우선 순위가 있습니다.

flex-grow 속성

플랙스박스 아이템(들)에 선언하는 속성입니다.

flex-grow 값은 한 행에 표시되는 아이템들의 상대적인 확장 비율을 정하는 속성으로, 플렉스박스 너비에서 한 행에 표시되는 아이템들의 너비 합을 뺀 나머지 여백 공간을 아이템에 분배하는 비율을 말합니다.

속성 값은 0 이상이어야 하며, 소수점을 사용할 수 있습니다. 0보다 작은 값은 무시됩니다.

예를 들어 한 행에 3개의 아이템이 있고, flex-grow 속성을 0 : 1 : 2 로 정했는데 아이템 너비 합을 제외한 여백이 120px가 남았다면 원래 너비에서 0 : 40px : 80px 만큼씩 넓어집니다.

다음과 같이 아이템 1/2/3 에 flex-grow 속성 값을 0 : 1 : 2 를 지정했으면

.content{
    width: 600px;
    display: flex;
    flex-wrap: wrap;
    background-color: #9a9;
    margin: 0 auto;
}
.content .item{

    margin-bottom: 1.25em;
    background-color: #a99;
    min-height: 100px;
    flex-basis: 160px;
}

.content .item:nth-child(1){background-color:lightblue;flex-grow: 0;}
.content .item:nth-child(2){background-color:orange;flex-grow: 1;}
.content .item:nth-child(3){background-color:darkgray;flex-grow: 2;}
.content .item:nth-child(4){background-color:coral;}
.content .item:nth-child(5){background-color:pink;}
.content .item:nth-child(6){background-color:khaki;}

flex-grow 속성 값이 설정된 아이템 1/2/3은 다음과 같이 남는 공간을 분배해 행을 채우게 됩니다.