CSS 정렬 콘텐츠 속성
예
탄성 상자 <div> 요소의 항목을 정렬 :
div
{
display: flex;
flex-flow: row wrap;
align-content:space-around;
}
{
display: flex;
flex-flow: row wrap;
align-content:space-around;
}
»시도
브라우저 지원
표의 수치 속성 버전 번호를 먼저 지원 브라우저를 나타낸다.
즉시 접두사 속성을 지원하는 첫 번째 버전 이후 디지털 -webkit-, -ms- 또는 -moz-를 다음과 같습니다.
재산 | |||||
---|---|---|---|---|---|
정렬 콘텐츠 | 21.0 | 11.0 | 28.0 | 9.0 7.0 -webkit- | 12.1 |
정의 및 사용
용기의 탄성 특성에 정렬 함량 가능한 모든 공간 크로스 샤프트를 차지하지 않는 경우, 용기 (세로) 내에 정렬.
팁 : 스핀들에 정렬 정당화 콘텐츠 속성 (레벨)를 사용합니다.
참고 : 반드시 여러 줄 용기 내에서 항목이 속성 효과를 렌더링하기 위해.
기본값 : | 뻗기 |
---|---|
상속 : | 아니 |
애니메이션 할 수 있습니다 : | NO. 참조하시기 바랍니다 애니메이션 (애니메이션) . |
버전 : | CSS3 |
자바 스크립트 구문 : | .style.alignContent = "센터"개체시도 |
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 | 设置该属性为它的默认值。请参阅 initial 。 | 测试 » |
inherit | 从父元素继承该属性。请参阅 inherit 。 |
관련 기사
CSS 참조 : 정렬 = 왼쪽 속성 항목보기
CSS의 참조 : = 왼쪽 자체의 속성을 맞 춥니 다
CSS 참조 설명서 : 정당화-콘텐츠 속성