💿 display: flex;

화면에 요소를 포지셔닝할 때 매우 유용하게 쓰이는 친구!

💿 flex는 왜 씀?

(제대로 쓸 줄 안다면) 요소들을 배치할 때 매우매우 편리하고 강력함

💿 어떻게 씀?

css 파일에 flex 속성을 부여하고 싶은 구분자에

display: flex;

집어넣으면 끝..이면 좋겠지만 추가로 줘야하는 속성이 많음.

💾 justify-content

요소를 어떻게 정의할래?

display: flex;
justify-content: blah-blah;

justify-content: flex-start; << 그냥 붙여서 가로정렬. 기본값임.
justify-content: flex-start; << 붙여서 가로 정렬인데 순서가 반대로.
justify-content: space-between; << 아이템 처음과 끝을 양 끝에 붙여놓고 동일한 여백을 줌.
justify-content: space-around; << 아이템 사이의 여백을 동일하게 맞춤
justify-content: flex-evenly; << 양 끝의 여백 또한 동일하게 맞춤.

💾 align-items

아이템을 어떻게 정렬할래?

display: flex;
align-items: blah-blah;

align-items: flex-start; << 요소 상단에 맞춰 정렬. 기본값임.
align-items: flex-end; << 요소 하단에 맞춰 정렬.
align-items: center; << 요소 중간에 맞춰 정렬.

💾 flex-direction

어떤 방향으로 표시할래?

display: flex;
flex-direction: blah-blah;

flex-direction: row; << 가로 정렬로 표시. 기본값임
flex-direction: row-reverse; << 가로 정렬로 표시할건데 순서가 반대로.
flex-direction: column; << 세로 정렬로 표시.
flex-direction: column; << 세로 정렬로 표시할건데 순서가 반대로.

Reference

https://www.youtube.com/watch?v=2BHyrE-nR3Q