Container
display: flex로 아이템 배치 규칙을 시작합니다.
Flexbox 축과 정렬 판단
Flexbox는 컨테이너 안의 아이템을 한 방향 축으로 배치하고 남는 공간과 정렬 방식을 유연하게 조절합니다.
Main
flex-direction이 주축을 정하고 justify-content가 주축 정렬을 맡습니다.
Cross
align-items와 align-content가 교차축 정렬을 조정합니다.
Flex 아이템
grow, shrink, basis, order로 개별 아이템의 크기와 순서를 다룹니다.
주축 방향의 남는 공간을 시작, 끝, 가운데, 균등 배치로 나눕니다.
한 줄 안에서 아이템의 교차축 위치와 늘어남을 제어합니다.
아이템이 넘칠 때 한 줄에 압축할지 다음 줄로 보낼지 정합니다.
flex: 1 같은 단축 값은 grow, shrink, basis가 함께 바뀝니다.
Flexbox 축과 정렬 판단 질문
아이템을 행이나 열 중 어느 방향으로 자연스럽게 흘릴지 먼저 정합니다.
Flexbox 축과 정렬 실수 방지
justify와 align은 Flexbox 주축·교차축 기준이 바뀌면 체감 방향도 함께 바뀝니다.
Flexbox 축과 정렬 판단
카드 목록을 가로 배치하고 모바일에서 줄바꿈되도록 조정합니다.