css Flexbox

Flexbox는 CSS 레이아웃 모델 중 하나로, 컨테이너 안의 아이템들을 쉽고 효율적으로 정렬할 수 있도록 도와줍니다. 부모 요소를 display: flex;로 설정하면, 자식 요소들은 자동으로 플렉스 컨테이너 안에서 정렬됩니다.

• Flex Container (부모 요소): display: flex; 또는 display: inline-flex;가 적용된 요소.
• Flex Items (자식 요소): 플렉스 컨테이너 안의 요소들.
• Main Axis (주 축): 요소들이 배치되는 주 방향 (flex-direction에 따라 변경).
• Cross Axis (교차 축): 주 축과 수직인 방향.

1.주요 속성

1) Flex Container (부모 요소)의 속성

속성	설명	사용 가능한 값
display: flex;	컨테이너를 플렉스 박스로 만듦	flex, inline-flex
flex-direction	아이템 정렬 방향 설정 (row, column 등)	row, row-reverse, column, column-reverse
justify-content	가로(주 축) 정렬 방식 설정	flex-start, flex-end, center, space-between, space-around, space-evenly
align-items	세로(교차 축) 정렬 방식 설정	flex-start, flex-end, center, baseline, stretch
align-content	여러 줄 아이템 정렬 방식 설정	flex-start, flex-end, center, space-between, space-around, stretch
flex-wrap	아이템 줄바꿈 여부 설정	nowrap, wrap, wrap-reverse

.container {
  display: flex;
  flex-direction: row; /* 기본값: 가로 정렬 */
  justify-content: center; /* 가로 가운데 정렬 */
  align-items: center; /* 세로 가운데 정렬 */
  gap: 10px; /* 아이템 간 간격 */
}

2) Flex Items (자식 요소)의 속성

속성	설명	사용 가능한 값
flex-grow	남은 공간을 차지하는 비율	숫자 (기본값: 1)
flex-shrink	아이템이 줄어드는 비율	숫자 (기본값: 0)
flex-basis	기본 크기 설정	길이 값(px, %, auto 등)
order	아이템의 순서 변경	숫자 (기본값: 0)
align-self	개별 아이템 정렬 방식 설정	auto, flex-start, flex-end, center, baseline, stretch

.item {
  flex-grow: 1; /* 남은 공간을 동등하게 분배 */
  flex-basis: 100px; /* 기본 크기 설정 */
  align-self: flex-start; /* 개별 아이템 위 정렬 */
}