목차
- align-self 예제 - 교차축 기준으로, 아이템 자체 정렬
- align-self 정의
- align-self 구문
- align-self 관련 주소
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-color:coral;">HTML</div>
<div style="background-color:lightblue;" id="hz">CSS</div>
<div style="background-color:lightgreen;">홈짱닷컴 Homzzang.com</div>
</div>
결과보기
align-self 정의
교차축 (=반대축) 기준으로, 플렉스 아이템 자체의 정렬 방법 지정.
1.
2.
- 기본값: auto
- 상속여부: X
- 애니효과: X
- CSS버전: CSS3
- JS구문: object.style.alignSelf="center";
3.
IE11 이상, 주요 최신 브라우저 지원.
4. MDN align-self 예제보기
https://developer.mozilla.org/en-US/docs/Web/CSS/align-self
align-self 구문
selector {align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;}
[속성값]
auto
부모 컨테이너의 align-items 속성을 상속 받음.
만약, 부모 컨테이너가 없는 경우 "stretch" 적용.
stretch
교차축 기준으로, 부모 컨테이너에 맞게 신축적으로 늘어남.
center
교차축 기준으로, 부모 컨테이너 중심에 위치.
flex-start
교차축 기준으로, 부모 컨테이너 앞단 부분에 위치.
flex-end
교차축 기준으로, 부모 컨테이너 끝단 부분에 위치.
baseline
교차축 기준으로, 부모 컨테이너의 기본선에 위치.
initial
이 속성의 기본값으로 설정.
inherit
부모 요소의 속성값 상속.
align-self 관련 주소
mdn align-self 강의
https://developer.mozilla.org/en-US/docs/Web/CSS/align-self