본문 바로가기

HTML&CSS

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

반응형

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

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

 

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

 

속성 속성 값 설명
flex-wrap
wrap, nowrap, wrap-reverse

기본값은 "nowrap" 입니다.
"wrap"은 플렉스박스 너비에 맞춰 아이템들이 채워지면 줄바꿈이 되면서 다음행에 아이템들이 채워집니다.
"wrap-reverse" 왼쪽 아래에서부터 아이템들이 줄을 바꿔서 채워집니다.
flex-direction row, row-reverse, column, column-reverse 아이템들이 배치되는 방향을 정하는 속성입니다.
가로 방향, 또는 세로 방향으로 아이템 배치 방향을 정합니다. "-reverse" 속성 값은 아이템 정렬을 반대로 합니다.

 

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

 

속성 속성 값 설명
flex-basis
0, auto, px, em, %, fill, content, max-content, min-content, fit-content

플랙스박스 안의 아이템 너비를 지정합니다. 기본 값은 "auto" 이며, 같은 너비로 아이템 너비가 자동 배분됩니다.
flex-grow
0이상의 숫자(음수는 0으로 처리됨)
소수점 가능.


플렉스박스 안의 아이템들이 커질 수 있는 상대적인 최대 크기 비율을 정합니다.
상대적인 비율이기 때문에 다른 아이템의 flex-grow 속성 값에 영향을 받아 아이템의 너비가 정해집니다.
예를 들어 한 행에 4개의 아이템이 표시되고 전체 4개의 아이템에 2 : 1 : 1 : 1 로 flex-grow 값을 정했으면 아이템들의 너비를 합한 크기를 플렉스박스의 너비에서 제외하고 남은 공간을 2 : 1 : 1 : 1 비율로 배분해 아이템 너비가 넓어집니다.
flex-grow 속성 값이 없는 아이템은 기본 값이 0이 되며, 너비가 넓어지지 않습니다.

 

 

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에 우선 순위가 있습니다.

 

속성 값 설명
auto 기본 값입니다.
아이템의 너비를 따라 갑니다. 너비 값이 지정되지 않은 경우 컨텐츠 내용에 따라 너비가 정해집니다.
px, %, em 아이템의 기본 너비를 정합니다.
픽셀, 퍼센트, em 단위 등으로 정할 수 있습니다.
"width" 속성이 함께 정의되어 있는 경우 "width" 속성에 우선합니다.
단위를 사용해 정의하는 경우 "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은 다음과 같이 남는 공간을 분배해 행을 채우게 됩니다.

 

flex-grow 속성으로 남는 여백을 비율대로 채운 아이템들

 

 

 

관련글

반응형

닫기