목차
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 속성 참고
