flex

화면에서 가로로 배치할 때 활용하기 유용한 방법이다.
(기본적으로 박스 엘리먼트는 세로로 쌓이기 때문에 display: flex 를 활용해서 가로로 배치할 때 유용하다.)

⚙️ 항상 부모 요소에 flex 를 준다!!

부모 태그 바로 밑에 있는 자식 요소에만 display: flex 가 적용이 되고,
자식 밑에 있는 태그는 별도로 적용을 해줘야 한다.


❗️flex는 default로 좌측과 상단 기준으로 정렬된다.

<div> 태그 자체가 박스 형식이기 때문에 가로 전체를 차지하게 된다.

가로 정렬 방법

justify-content: flex-end : 박스 내에서 제일 오른쪽 끝으로 붙여서 정렬
justify-content: flex-start : 박스 내에서 제일 왼쪽으로 붙여서 정렬
justify-content: center : 박스 내 중앙에 정렬
justify-content: space-between : 박스 내 각각의 아이템 사이에 일정한 간격을 갖게 하여 정렬

세로 정렬 방법

align-items: flex-start : 기본적으로 상단 기준으로 정렬이기 때문에 start는 박스 상단으로 정렬
align-items: flex-end : 박스 하단으로 정렬
align-items: center : 박스 세로 기준 중간으로 정렬

flex 가 최근에 생긴 기능이라 브라우저에서 작동이 되는지 확인을 해봐야 한다고 했는데,
Can I use 사이트에서 브라우저별로 구동이 되는지 확인을 해보니 거의 다 되더라!
맘 편히 사용하자 👌🏻
(IE 6-9, Opera 10-11.5에서만 안 된다고 하니 거의 다 되는듯!)