【CSS】플렉시블 박스 (flexible box)의 Flex 아이템의 행(行)의 수직 방향(cross-axis) 배치 방법: align-content

align-content 지정

align-content 속성은 Flex 컨테이너의 cross axis(교차축 / 부축)에 공백이 있는 경우 행(行)의 Flex 아이템의 배치 방법을 보여줍니다.

이 속성은 주축(main axis) 방향의 배치 방법을 지정하는 justify-content 속성에 대한 수직 방향으로 배치 방법을 지정합니다.

단, 한 줄만의 경우에는 해당 속성의 효과는 무효합니다. 또한 flex-wrap 속성 값이 nowrap의 경우도 무효가 됩니다. 여러 행이 존재하는 경우에 이 속성은 유효합니다.

▼　"align-content : flex-start;"에서는, Flex 아이템은 cross-start에서 시작(기점)으로 채워집니다.

첫 번째 행의 cross-start의 끝과 Flex 컨테이너의 cross-start의 끝이 정렬됩니다. 2행째 이후의 행 박스는 행에 맞게 간격을 비우지 않고 배치됩니다.

[CSS]　flex-start

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

▼　"align-content : flex-end;"는 flex-start 값의 반대입니다. Flex 아이템은 Flex 컨테이너의 cross-end 끝의 종단 위치에 맞춰집니다.

마지막 행의 cross-end 끝과 Flex 컨테이너의 cross-end의 끝이 정렬됩니다. 행(行) 상자 사이에 간격을 두지 않고 배치됩니다.

[CSS]　flex-end

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

▼　"align-content : center;"는 Flex 아이템이 가운데 집결로 모입니다. 모든 행을 행 사이의 여백을 두지 않고 늘어 놓은 후, corss-axis(교차 축)의 cross-start(시작)와 cross-end(끝) 사이에 배치됩니다.

행 박스는 서로 가까이 붙어, 사이에 간격을 두지 않고 서로 배치합니다. Flex 컨테이너의 cross-start로부터 Flex 아이템의 첫 번째 행까지의 여백과 Flex 컨테이너의 cross-end에서 Flex 아이템의 마지막 행까지의 여백은 동일합니다.

[CSS]　center

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

▼　"align-content : stretch;"는 Flex 컨테이너의 행 사이의 여백을 채우기 위해 행 박스(cross size)를 확장합니다. 여백은 모든 행에 균등하게 분배됩니다.

행 사이의 여백을 채우기 위해 행 박스를 확장합니다. Flex 컨테이너 내에 채울 여백이 없는 경우는 flex-start 값을 지정하는 것과 동일하게 됩니다.

[CSS]　stretch

 .stretch｛
　　-webkit-align-content: stretch;
　　align-content: stretch;
　　}

▼　"align-content : space-between;"에서는 Flex 아이템의 행은 Flex 컨테이너 내에서 균등하게 배치됩니다. 인접한 Flex 아이템 사이의 여백이 동일하게 채워집니다.

Flex 컨테이너의 cross-start(시작)와 cross-end (끝)의 끝에 각각 첫 번째 행 박스와 마지막 행 박스가 가까이 붙습니다.

[CSS]　space-between

 .space-between｛
　　-webkit-align-content: space-between;
　　align-content: space-between;
　　}

▼　"align-content : space-around;"에서는 Flex 컨테이너에 첫 번째 행의 앞과 마지막 행 다음에 절반의 간격을 두고 행을 일정한 간격으로 배열합니다

Flex 컨테이너에 여백이 없는 경우에는 center 값을 지정한 경우와 동일합니다. 인접 행간의 여백이 동일하게 되도록 행이 균등하게 배치됩니다.

[CSS]　space-around

 .space-around｛
　　-webkit-align-content: space-around;
　　align-content: space-around;
　　}