• Q&A
  • 회원가입
  • 로그인

[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 속성 참고.

 

 

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012