display:flex

컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치합니다.

🔍부모박스(컨테이너)안의 자식박스(item)를 정렬하는 속성.
flex를 적용하는 순간부터 자식박스는 가로로 정렬됨.

이때 자식박스의 가로 넓이 총 합이 부모박스의 넓이를 넘게 되면
자식박스의 사이즈가 자동으로 줄어들며 부모를 채움.
부모박스(컨테이너)에 flex가 적용되면 해당 자식들을 다양하게 정렬하는
하위 정렬 속성들을 함께 사용할 수 있다. 하위 정렬 속성들도 모두 부모박스에
적용해야한다. 이때 부모 바로 아래 자식에게만 속성이 적용된다.

📌display:flex 속성은 바로 위의 부모박스에 적용해야 하며, 이에 따른
정렬 속성들도 부모박스에 적용해야 함.

플렉스 박스 항목을 배치하는 속성

종류	설명
justify-content	자식박스들을 가로로 정렬할때 사용
align-items	자식박스들을 세로로 정렬하는 속성
align-self	개별적인 자식박스들의 정렬 상태
align-content	여러 줄로 표시된 항목의 정렬 방법

박스에 먼저 display:flex 속성을 적용했을 때 아래 속성들이 부여된다.

🔍justify-content

부모박스 안의 자식박스들을 가로로 정렬할때 사용하는 속성.

-justify-content : flex-start
기본값으로 부모박스 안의 자식들을 왼쪽에서 오른쪽으로 정렬함.
-justify-content : flex-end
기본값으로 부모박스 안의 자식들을 오른쪽에서 왼쪽으로 정렬함.
-justify-content : center
기본값으로 부모박스 안의 자식들을 가운데로 정렬함.
-justify-content : space-between
기본값으로 부모박스 안의 자식들을 양쪽을 기준으로 같은 간격으로 정렬함.
-justify-content : space-around
자식박스의 양 옆으로 동일한 간격으로 정렬함.
-justify-content : space-evenly
기본값으로 부모박스 안의 자식들을 고르게 동일한 간격으로 배치함.
모든 간격을 동일하게 적용.

컨텐츠 영역을 잡을 때 부모박스는 margin으로 가운데로 정렬해야한다. 하의 정렬 속성이
적용이 안된다.