[DOM_Style] JS - alignSelf 속성(I) - (플렉스아이템 수직정렬. 아이템 자체에 사용. align-self속성. IE11)

1. alignSelf 예제 - align-self 속성 설정
2. alignSelf 정의
3. alignSelf 구문

alignSelf 예제 - align-self 속성 설정

 

<style> 

#main {

  width: 250px;

  height: 300px;

  border: 1px solid silver;

  display: -webkit-flex; /* Safari */

  -webkit-align-items: flex-start; /* Safari 7.0+ */

  display: flex;

  align-items: flex-start;

}

#main div {

  -webkit-flex: 1; /* Safari 6.1+ */

  flex: 1;

}

#hz {

  -webkit-align-self: center; /* Safari 7.0+ */

  align-self: center;

}

</style>

<div id="main">

  <div style="background:coral;">HTML</div>

  <div style="background:lightblue;" id="hz">CSS</div>  

  <div style="background:lightgreen;">홈짱닷컴 Homzzang.com</div>

</div>

<button onclick="homzzang()">클릭</button>

<script>

function homzzang() {

  document.getElementById("hz").style.WebkitAlignSelf = "stretch"; // Safari 7.0+

  document.getElementById("hz").style.alignSelf = "stretch";

}

</script>

결과보기

alignSelf 정의

 

CSS align-self 속성 설정/반환.

 

alignSelf 구문

 

[반환]

object.style.alignSelf 

 

[설정]

object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"

 

---

[속성값]

 

CSS align-self 속성 참고.