CSS align-content 속성

정의와 사용법

align-content 속성 수정 flex-wrap 속성의 동작. align-items 유사하지만, 탄력 요소를 정렬하는 대신 탄력 선을 정렬합니다.

주의:이 속성이 효과를 발휘하려면 여러 줄의 요소가 있어야 합니다!

훌륭한 조언:사용 justify-content 속성은 주축(주축)에 있는 요소를 수평으로 정렬할 수 있습니다.

다른 것을 참조하세요:

CSS 강의:CSS 플렉스박스

CSS 강의:CSS 그리드

CSS 참조 가이드:align-items 속성

CSS 참조 가이드:align-self 속성

CSS 참조 가이드:justify-content 속성

HTML DOM 참조 가이드:alignContent 속성

예제

줄을 탄력 컨테이너의 중앙으로打包합니다:

div {
  width: 70px;
  height: 300px;
  border: 1px solid #c3c3c3;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

본인이 직접 시도해 보세요

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 이 속성을 부모 요소에서 thừa kế합니다. 참조 inherit。

기술 세부 사항

기본 값: stretch
thừa kế: 아니요
애니메이션 제작: 지원하지 않습니다. 참조:애니메이션 관련 속성。
버전: CSS3
JavaScript 문법: object.style.alignContent="center"

브라우저 지원

표中的 숫자는 이 속성을 완전히 지원하는 첫 번째 브라우저 버전을 나타냅니다.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0