CSS align-content 속성
예시
플렉스 컨테이너의 중심을 향한 패킹 라인:
div
{
width: 70px;
height: 300px;
border: 1px solid #c3c3c3;
display: flex;
flex-wrap: wrap;
align-content: center;
}
정의 및 사용
속성 은 flex-wrapalign-content
속성 의 동작을 수정합니다
. align-items 와 유사
하지만 플렉스 항목을 정렬하는 대신 플렉스 라인을 정렬합니다.
참고: 이 속성이 효과를 나타내려면 여러 줄의 항목이 있어야 합니다!
팁: justify-content 속성을 사용 하여 항목을 기본 축(가로)에 정렬합니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
-webkit- 뒤에 오는 숫자는 접두사와 함께 작동한 첫 번째 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
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;
속성 값
Value | Description | Play it |
---|---|---|
stretch | Default value. Lines stretch to take up the remaining space | |
center | Lines are packed toward the center of the flex container | |
flex-start | Lines are packed toward the start of the flex container | |
flex-end | Lines are packed toward the end of the flex container | |
space-between | Lines are evenly distributed in the flex container | |
space-around | Lines are evenly distributed in the flex container, with half-size spaces on either end | |
space-evenly | Lines are evenly distributed in the flex container, with equal space around them | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
관련 페이지
CSS 참조: align-items 속성
CSS 참조: align-self 속성
CSS 참조: justify-content 속성
HTML DOM 참조: alignContent 속성