HTML/CSS - display: flex; (요소를 수평 구조로 정렬)

요소를 수평 구조로 정렬하기

div등의 blcok 요소를 다루다보면 display: inline-block; 설정을 주고
자리가 충분히 남아있음에도 좌 상단으로 정렬되지 않는 현상이 있다

float 등을 사용하면 되지만 요소들을 3차원으로 배열하다보면
화면 구조 전체가 무너지기도 한다

 

-> 정렬할 영역 상위 영역에 display: flex를 주면 2차원 요소들을 쉽게 수평 구조로 정렬 가능

-> flex의 경우 부모 영역의 크기 1줄에 자식 영역 요소들을 모두 채워넣는다