[CSS] Flexbox - Vertical Aligning(align-items 사용하기)

 

 

 

안녕하세요 냥장판 입니다 

지난 게시글 에서는 flexbox 정렬에 대해 알아봤어요

2020/03/02 - [놀고있네/HTML & CSS] - [CSS] Flexbox - Aligning(justify-content 사용하기)

[CSS] Flexbox - Aligning(justify-content 사용하기)

 

justify-content 가 수평 방향의 정렬을 말한다면,

수직 방향에 정렬에서는 align-items 속성을 사용한답니다!

 

By 냥장판

 

 

align-items에 사용할 수 있는 속성은 아래와 같다.

 

• flex-start (top)
• center
• flex-end (bottom)
• stretch
• baseline

justify-content와 사용법은 비슷하다.

 

By 냥장판

 

stretch 와 baseline 은 기준이 조금 다른데,

stretch는 같은 크기로 세로로 죽 늘리는거고

baseline 은 크기는 다르지만 x 축을 기준점으로 정렬된다고 보면 된다.

By 냥장판

 

 

 

그럼 이만!