예
가요 성 용기의 중심을 향해 팩 라인 :
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-align-content: center;
align-content: center;
}
»그것을 자신을 시도 정의 및 사용
정렬 콘텐츠 속성은 플렉스 랩 속성의 동작을 수정합니다. -항목을 정렬 비슷하지만 대신 플렉스 항목을 정렬, 그것은 플렉스 라인을 정렬합니다.
팁 : 사용 정당화 콘텐츠 의 주요 축에있는 항목을 정렬하는 속성을 (horizontally) .
참고 : 어떤 효과를 가지고이 부동산에 대한 항목이 여러 줄이 있어야합니다.
| 기본값: | stretch |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS3 |
| 자바 스크립트 구문 : | object .style.alignContent="center" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
-webkit- 다음 숫자는 접두사와 함께 일 첫 번째 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| align-content | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
CSS 구문
align-content: stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;속성 값
| 값 | 기술 | 플레이 |
|---|---|---|
| stretch | 기본값. 선은 나머지 공간을 차지하기 위해 스트레칭 | »플레이 |
| center | 라인 플렉스 용기의 중심을 향해 포장 | »플레이 |
| flex-start | 라인 플렉스 용기 스타트 향해 포장 | »플레이 |
| flex-end | 라인 플렉스 용기의 단부를 향해 포장 | »플레이 |
| space-between | 라인 균등 플렉스 용기에 분포 | »플레이 |
| space-around | 선은 균등하게 양쪽 끝에서 절반 크기의 공간으로, 플렉스 컨테이너에 배포됩니다 | »플레이 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | »플레이 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
관련 페이지
CSS 참조 : align-items property
CSS 참조 : align-self property
CSS 참조 : justify-content property
HTML DOM 참조 : alignContent property