목차
- alignContent 예제 - flex 항목 세로 정렬
- alignContent 정의
- alignContent 구문
alignContent 예제 - flex 항목 세로 정렬 설정
<head>
<style>
#hz {
width: 300px;
height: 300px;
border: 1px solid #000000;
display: -webkit-flex; /* Safari */
-webkit-flex-flow: row wrap; /* Safari 6.1+ */
-webkit-align-content: space-around; /* Safari 7.0 */
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
#hz div {
width: 150px;
height: 70px;
}
</style>
<div id="hz">
<div style="background-color:coral;"></div>
<div style="background-color:lightblue;"></div>
<div style="background-color:khaki;"></div>
<div style="background-color:pink;"></div>
<div style="background-color:lightgrey;"></div>
<div style="background-color:lightgreen;"></div>
</div>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("hz").style.WebkitAlignContent = "space-between"; // Safari 7.0+
document.getElementById("hz").style.alignContent = "space-between";
}
</script>
결과보기
alignContent 정의
CSS align-content 속성 설정/반환.
cf.
justifyContent 속성 : flex 항목 기본축(=가로) 정렬.
alignContent 구문
[반환] - 인라인스타일만 지원
object.style.alignContent
[설정]
object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"
[속성값]
CSS align-content 속성 참고
