CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS3 align-content 속성 사용 방법 및 예제

설명

align-content는 가로 축에 남는 공간이 있을 때(CSS 속성을 사용하여 유연 컨테이너 내의 요소를 유연 컨테이너 내에 정렬할 수 있습니다. 이 속성은 단一行 유연 컨테이너에 영향을 미치지 않습니다. 또한, CSS를 사용하여 justify-content속성(수평)은 주축선 위의 요소를 정렬합니다。

아래 표는 이 속성의 사용 문맥과 버전 역사를 요약합니다。

기본 값:	stretch
적용 대상:	다중 행 유연 컨테이너
thừa kế:	없음
애니메이션 가능:	아니요。参照하십시오 애니메이션 속성。
CSS 버전：	CSS3의 새 기능
JavaScript 문법：	object.style.alignContent="중앙 정렬"

align-content 사용 문법

이 속성의 문법은 다음과 같습니다：

align-content: 중앙 정렬 | 유연성-start | flex-end | space-between | space-around | stretch | initial | inherit

다음 예제는 CSS의 align을 사용하는 방법을 보여줍니다:-content 속성。

예제

　.flex-컨테이너　{
　　　　　　　　　　　/*　Safari 브라우저　*/
　　　　　　　　　　　display:　-webkit-flex;　
　　　　　　　　　　　-webkit-flex-flow: row wrap;
　　　　　　　　　　　-webkit-align-content: space-around;
　　　　　　　　　　　/*　표준 문법　*/
　　　　　　　　　　　display: flex;
　　　　　　　　　　　flex-flow: row wrap;
　　　　　　　　　　　align-content: space-around;
　　　　}

테스트를 해보세요‹/›

속성 값

다음 표는 이 속성의 값을 설명합니다。

값	설명
center	요소는 엘라스틱 컨테이너의 중앙에 위치합니다.
flex-start	요소는 엘라스틱 컨테이너의 시작에 위치합니다.
flex-end	요소는 엘라스틱 컨테이너의 끝에 위치합니다.
space-between	요소는 엘라스틱 컨테이너에서 균형 잡혀 있어서 두 가지 연속 요소 간의 공간이 같습니다.
space-around	요소는 엘라스틱 컨테이너에서 균형 잡혀 있어서 각 요소 주위(즉, 이전, 사이, 그리고 이후)의 공간이 같습니다.
stretch	엘라스틱 컨테이너에 맞춰 끌어올립니다. 공간은 모든 요소 간에 평균적으로 분배됩니다. 이는 기본 값입니다.
initial	이 속성을 기본 값으로 설정합니다.
inherit	지정된 경우, 관련 요소는 부모 요소의 속성 계산 값을 사용하는 align을 사용합니다.-content。

브라우저 호환성

align-content 속성은 모든 주요 브라우저에서 지원됩니다. 숫자는 이 속성을 지원하는 첫 번째 브라우저의 버전 번호를 나타냅니다.

	Firefox 28+ Google Chrome21+ Internet Explorer 11+ Apple Safari 7+ ^-webkit- Opera 12.1+

주의: Apple Safari 7및 더 나은 버전에서 align을 지원-content 속성, 하지만-webkit-프리픽스, 예를 들어-webkit-align-content: center;

추가로 읽어보세요

다음 튜토리얼을 참조하세요：CSS 정렬。

相关 속성：align-items，align-self，display，flex，flex-basis，flex-direction，flex-flow，flex-grow，flex-shrink，flex-wrap，justify-content，min-height，min-width，order。

CSS3 align-items 속성