【CSS】Flexible Box(플렉시블 박스)의 Flex 아이템 배치 속성 〜 flex 아이템의 배치 방법(flex-direction), flex 아이템의 수평 정렬(justify-content), flex 아이템의 수직 정렬(align-items)

플렉시블 박스(flexible box) 작성 있어서, Flex 컨테이너 안의 flex 아이템의 다양한 배치 방법에 대해 소개하겠습니다.

주요 배치 관련 속성에는 flex-direction, justify-content, align-items 등이 있습니다.

flex-direction 지정하기

부모(親) 요소인 flex 컨테이너 안에 놓여 있는 자식(子) 요소를 어떻게 배치할 지를 지정합니다.

Flex 컨테이너의 주축의 방향을 설정하여 자식 요소인 flex 아이템의 방향을 결정합니다.

[CSS] 공통의 Flex 컨테이너

 .flex-container{
　　width:100%;
　　-webkit-display:flex;
　　display:flex;
　　padding-bottom:20px;
　　border:1px dotted #F60;
　　}

[CSS]　공통의 Flex 아이템(A〜D)

 .flex-items{
　　height:40px;
　　width:100px;
　　background-color:#999;
　　border:1px solid #FFF;
　　}

▼　"flex-direction : row;" 텍스트의 자식 요소와 같은 방향으로, 일반적으로 flex 아이템은 왼쪽에서 오른쪽으로 수평으로 배치됩니다. 기본값입니다.

[CSS]　row

 .row{
　　-webkit-flex-direction:row;
　　flex-direction:row;
　　}

▼　"flex-direction : row-revers;"는 row 속성값의 반대 개념으로, flex 아이템은 오른쪽에서 왼쪽으로 수평 방향으로 배치됩니다.

[CSS]　row-revers

 .row-revers{
　　-webkit-flex-direction:row-revers;
　　flex-direction:row-revers;
　　}

▼　"flex-direction : row-column;"에서 flex 아이템은 위에서 아래로 수직 방향으로 배치됩니다.

[CSS]　column

 .column{
　　-webkit-flex-direction:column;
　　flex-direction:column;
　　}

▼　"flex-direction : row-column-reverse;"는 column 값의 반대값으로, flex 항목을 아래에서 위로 수직 방향으로 배치시킵니다.

[CSS]　column-reverse

 .column-reverse{
　　-webkit-flex-direction:column-reverse;
　　flex-direction:column-reverse;
　　}

justify-content(수평 정렬)

[CSS] 공통의 Flex 컨테이너

 .flex-container{
　　width:100%;
　　-webkit-display:flex;
　　display:flex;
　　-webkit-flex-direction:row;
　　flex-direction:row;
　　padding-bottom:20px;
　　border:1px dotted #F60;
　　}

▼　"justify-content : flex-start;"는 자식 요소인 Flex 아이템을 가로 배치의 경우 "왼쪽 맞춤", 세로 배치의 경우 "위쪽 맞춤"으로 개시점에서 간격없이 배치됩니다.

[CSS]　flex-start

 .flex-start｛
　　-webkit-justify-content: flex-start;
　　justify-content: flex-start;
　　}

▼　"justify-content : flex-end;"는 flex-start 값의 반대입니다.

Flex 아이템을 가로 배치의 경우 끝점에서 간격없이 "오른쪽 맞춤", 세로 배치의 경우 "아래쪽 맞춤"이 됩니다.

[CSS] flex-end

 .flex-end｛
　　-webkit-justify-content: flex-end;
　　justify-content: flex-end;
　　}

▼　"justify-content : center;"에서 Flex 아이템은 상하 중앙에 모이게 됩니다.

[CSS] center

　　-webkit-justify-content: center;
　　justify-content: center;
　　}

▼　"justify-content : space-between;"에서 Flex 아이템은 균등하게 간격을 두고 배치됩니다. 좌우 양쪽의 flex 아이템의 시작 및 끝에 공간이 생기지 않습니다.

"flex 아이템"의 폭의 합계가 "Flex 컨테이너"의 폭보다 긴 경우, 이 값은 "flex-start"의 값과 동일합니다.

[CSS]　space-between

　　-webkit-justify-content: space-between;
　　justify-content: space-between;
　　}

▼　"justify-content : space-around;"에서 flex 아이템은, 모든 아이템은 일정한 간격으로 배치됩니다.

space-between과 같이 균등 간격으로 배치되지만, 좌우 양끝의 flex 아이템은 외부에 간격의 절반 정도의 공간이 있습니다.

"flex 아이템"의 폭의 합계가 "flex 컨테이너"의 폭보다 긴 경우, 이 값은 "center"값과 동일하게 됩니다.

[CSS]　space-around

　　-webkit-justify-content: space-around;
　　justify-content: space-around;
　　}

align-items(수직 정렬)

▼　"align-items : flex-start;"로 flex 아이템은 flex 컨테이너의 교차축의 시작점(cross start, 위쪽 맞춤)에 배치됩니다.

[CSS]　flex-start

 .flex-start｛
　　-webkit-align-items: flex-start;
　　align-items: flex-start;
　　}

▼　"align-items : flex-end;"는 flex-start 값의 반대입니다. 교차축의 종점(cross end, 아래쪽 맞춤)에 배치됩니다

[CSS]　flex-end

 .flex-end｛
　　-webkit-align-items: flex-end;
　　align-items: flex-end;
　　}

▼　"align-items: center;"로 Flex 아이템은 중앙에 모이게 됩니다.

[CSS]　center

 .center｛
　　-webkit-align-items: center;
　　align-items: center;
　　}

▼　"align-items : stretch;"는 Flex 아이템은 Flex 컨테이너의 높이까지 꽉 채웁니다.

[CSS]　stretch

 .center｛
　　-webkit-align-items: stretch;
　　align-items: stretch;
　　}

▼　"align-items: baseline;"은 Flex 아이템은 베이스 라인에 맞춰 배치됩니다.

[CSS]　baseline

 .center｛
　　-webkit-align-items: baseline;
　　align-items: baseline;
　　}