[CSS] 내가 보려고 만든 각종 요소들 정렬하는 방법

display: flex 에서 정렬할 때

https://studiomeal.com/archives/197

 

1) justify-content (수평방향)

- flex-start (기본값) : 아이템들을 시작점으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 왼쪽, column(세로 배치)일 때는 위.

- flex-end : 아이템들을 끝점으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 오른쪽, column(세로 배치)일 때는 아래.

- center : 아이템들을 가운데로 정렬합니다.

- space-between : 아이템들의 “사이(between)”에 균일한 간격

- space-around : 아이템들의 “둘레(around)”에 균일한 간격

- space-evenly : 아이템들의 사이와 양 끝에 균일한 간격을 만들어 줍니다.  *IE와 엣지(Edge) 미지원

 

 

2) align-itmes (수직방향)

- stretch (기본값) : 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다.

- flex-start : 아이템들을 시작점으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽.

- flex-end :아이템들을 끝으로 정렬합니다.
flex-direction이 row(가로 배치)일 때는 아래, column(세로 배치)일 때는 오른쪽.

- center : 아이템들을 가운데로 정렬합니다.

- baseline : 아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

 

 

 

 

text-allign: center

https://developer.mozilla.org/ko/docs/Web/CSS/text-align

 

vertical-align : 인라인 요소만 가능하다

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align