[HTML/CSS] align-content

align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.

정의(Definition)

• align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
• align-content 속성은 한 줄(flex-wrap: nowrap)에서는 의미가 없습니다.

참고(Reference)

• flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다.
• flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자식 요소인 아이템(Item)으로 구성됩니다.
• 플렉스 컨테이너에는 flex-direction, flex-wrap, justify-content, align-items, align-content가 있습니다.
• 플렉스 아이템에는 flex, flex-grow, flex-shrink, flex-basis, align-self, order가 있습니다.

Flex와 관련된 속성(Flex Related Properties)

• align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.
• align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.
• align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.
• flex 속성은 콘텐츠의 성질을 flex로 설정합니다.
• flex-basis 속성은 콘텐츠 아이템의 기본 값을 설정합니다.
• flex-direction 속성은 콘텐츠 아이템의 정렬 방향을 설정합니다.
• flex-flow 속성은 콘텐츠 아이템의 정렬 방향과 줄 속성을 설정합니다.
• flex-grow 속성은 콘텐츠 아이템의 크기를 숫자를 통해 확대 설정합니다.
• flex-shrink 속성은 콘텐츠 아이템의 크기를 숫자를 통해 축소 설정합니다.
• flex-wrap 속성은 콘텐츠 아이템의 줄 속성을 설정합니다.
• justify-content 속성은 콘텐츠 아이템의 좌우 관계 정렬 상태를 설정합니다.
• order 속성은 콘텐츠 아이템의 순서를 설정합니다.

문법(Syntax)

align-content : stretch | center | flex-start | flex-end | space-between | space-around

/* 기본 속성 */
align-content : stretch
align-content : center
align-content : flex-start
align-content : flex-end
align-content : space-between
align-content : space-around

속성(Property)

호환성(Compatibility)

						6	7	8	9	10	11
align-content	○	○	○	○	○	❌	❌	❌	❌	❌	○	○	○	○

참고 사이트(Reference)