플렉스 박스: 플렉스 박스 레이아웃을 사용하여 요소를 정렬

플렉스 박스(Flexbox) 레이아웃 모델은 웹 페이지의 요소들을 유연하게 정렬하고 배치하는 데 사용되는 CSS3의 기능입니다. 이 모델은 복잡한 레이아웃을 단순하고 효과적으로 구현할 수 있게 해주며, 특히 반응형 디자인에 매우 유용합니다.

플렉스 컨테이너(Flex Container) 설정

1. Flex Container 선언:
   • display: flex 또는 display: inline-flex를 사용하여 플렉스 컨테이너를 선언합니다. flex는 블록 레벨 컨테이너를 만들고, inline-flex는 인라인 레벨 컨테이너를 만듭니다.
2. Flex Direction (플렉스 방향):
   • flex-direction: 플렉스 아이템들이 놓일 주 축(main axis)의 방향을 결정합니다. 옵션에는 row(행), row-reverse(행 역방향), column(열), column-reverse(열 역방향)가 있습니다.
3. Flex Wrap (플렉스 줄바꿈):
   • flex-wrap: 플렉스 아이템들이 컨테이너의 너비를 초과할 때 줄바꿈 여부를 설정합니다. 옵션에는 nowrap(줄바꿈 없음), wrap(줄바꿈), wrap-reverse(역방향 줄바꿈)가 있습니다.
4. Flex Flow (플렉스 흐름):
   • flex-flow: flex-direction과 flex-wrap을 결합한 단축 속성입니다. 예: flex-flow: row wrap;
5. Justify Content (주 축 정렬):
   • justify-content: 주 축(main axis)을 따라 플렉스 아이템들을 어떻게 정렬할지 결정합니다. 옵션에는 flex-start(시작점 정렬), flex-end(끝점 정렬), center(중앙 정렬), space-between(사이 간격 동일), space-around(주변 간격 동일), space-evenly(모든 간격 동일)가 있습니다.
6. Align Items (교차 축 정렬):
   • align-items: 교차 축(cross axis)을 따라 플렉스 아이템들을 어떻게 정렬할지 결정합니다. 옵션에는 flex-start, flex-end, center, baseline(기준선 정렬), stretch(늘림)가 있습니다.
7. Align Content (여러 줄 정렬):
   • align-content: 교차 축에서 여러 줄의 플렉스 아이템들을 정렬합니다. 이 속성은 플렉스 라인이 여러 개일 때만 적용됩니다.

플렉스 아이템(Flex Item) 설정

1. Flex Grow (플렉스 성장):
   • flex-grow: 플렉스 아이템이 남은 공간을 어떻게 차지할지 결정합니다. 숫자 값이 큰 아이템이 더 많은 공간을 차지합니다.
2. Flex Shrink (플렉스 축소):
   • flex-shrink: 플렉스 아이템이 공간 부족 시 얼마나 줄어들지 결정합니다. 숫자 값이 클수록 더 많이 줄어듭니다.
3. Flex Basis (플렉스 기본 크기):
   • flex-basis: 플렉스 아이템의 기본 크기를 설정합니다. 이 속성으로 아이템의 초기 크기를 지정할 수 있습니다.
4. Flex (플렉스 단축 속성):
   • flex: flex-grow, flex-shrink, flex-basis를 한 줄로 결합한 단축 속성입니다. 예: flex: 1 0 auto;
5. Align Self (개별 아이템 정렬):
   • align-self: 개별 플렉스 아이템을 교차 축(cross axis)에 따라 독립적으로 정렬합니다. align-items 속성을 오버라이드합니다.