[flex] CSS - align-items 속성(C) ★★★ - 교차축에서 아이템 정렬. (= align-items속성 = 얼라인아이템즈속성) ※ 플렉스 컨테이너용 속성 ※ 세로 가운데 정렬 ※ 아이템 수직정렬

1. align-items 예제 - 교차축에서 아이템 정렬
2. align-items 정의
3. align-items 구문
4. align-items 예제 - 세로 가운데 정렬

align-items 예제 - 교차축에서 아이템 정렬 

 

<style> 

#hz {

  width: 200px;

  height: 300px;

  border: 1px solid silver; 

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

  -webkit-align-items: center; /* Safari */

  display: flex;

  align-items: center;

}

#hz div {

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

   flex: 1;

}

</style>

<div id="hz">

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

  <div style="background-color:lightblue;">CSS</div>  

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

</div>

 

결과보기

align-items 정의

 

교차축 (=반대축) 기준으로 아이템 배치・정렬.

 

---

 

1.

align-items 속성 재정의하려면, 각 아이템의 align-self 속성 사용.

 

2.

• 기본값: stretch
• 상속여부: X
• 애니효과: X
• CSS버전: CSS3
• JS구문: object.style.alignItems="center"

 

3.

IE11 이상 주요 브라우저 모두 지원.
단, 일부 사파리 구버전 경우 -webkit- 접두어 필요.

 

4. MDN align-item 예제 보기
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

 

align-items 구문

 

selector {align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;}

 

---

[속성값]

 

• stretch - 교차축 양끝 기준으로 상하로 쭈욱 늘어남. (기본값) 
• center - 교차축 중단에 아이템 배치.
• flex-start - 교차축 앞단에 아이템 배치.
• flex-end - 교차축 끝단에 아이템 배치.
• baseline - 아이템 안 텍스트 기본라인에 맞춰 교차축 상 배치. 
• initial - 이 속성의 기본값으로 설정
• inherit - 부모요소 속성값 상속

 

PS. 예제의 핑크색 부분을 바꿔가며 확인 바람.

align-items 예제 - 세로 가운데 정렬

 

<style>

#hz {

  border: 1px solid silver;

  height:300px;

  width:300px;

  flex: 1;

  display: -webkit-flex;

  display: flex;

  -webkit-align-items: center;

  align-items: center;

  -webkit-justify-content: center;

  justify-content: center;

}

</style>

 

<div id="hz">홈짱닷컴 Homzzang.com</div>

 

결과보기