alignContent 속성은 flexbox 또는 그리드의 항목을 정렬하는 데 사용됩니다. 사용 가능한 공간을 모두 사용하지 않을 때 항목을 세로축에 정렬하는 데 사용됩니다.
구문
다음은 −
의 구문입니다.alignContent 속성 설정 -
object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
값
다음은 값입니다 -
| 값 | 설명 |
|---|---|
| 스트레치 | 기본값이며 컨테이너에 맞게 항목을 늘리는 데 사용됩니다. |
| 중앙 | 컨테이너의 중앙에 항목을 배치하는 데 사용됩니다. |
| 플렉스 스타트 | 컨테이너의 시작 부분에 항목을 배치합니다. |
| 플렉스 엔드 | 컨테이너 끝에 항목을 배치합니다. |
| 사이의 공백 | 줄 사이에 공백을 두고 항목을 배치합니다. |
| 공백 | 줄 앞뒤에 공백을 두고 항목을 배치합니다. |
| 초기 | 이 속성을 초기 값으로 설정합니다. |
| 상속 | 상위 속성 값을 상속합니다. |
예시
alignContent 속성의 예를 살펴보겠습니다 -
<!DOCTYPE html>
<html>
<head>
<style>
#container {
width: 180px;
height: 220px;
padding: 10px;
border: 1px solid #333;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.ele {
width: 60px;
height: 60px;
background-color: skyblue;
}
.ele:nth-child(2n) {
background-color: orange;
}
</style>
<script>
function changeAlign(){
document.getElementById("container").style.alignContent="flex-start";
}
</script>
</head>
<body>
<div id="container">
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
<div class="ele"></div>
</div>
<p>Change the align content property of the above div by clicking the belwo button</p>
<button onclick="changeAlign()">CHANGE</button>
</body>
</html> 출력
이것은 다음과 같은 출력을 생성합니다 -
CHANGE 버튼을 클릭하면 -
