flex 컨테이너와 아이템을 시각화하여 자식 요소들이 flex 컨테이너 내에서 어떻게 위치하는지 명확하게 확인
flexbox 속성을 조정하여 다양한 정렬 및 분배 효과를 관찰
flex 아이템의 방향
교차축에서의 아이템 정렬
주축에서의 정렬 및 분배
아이템이 새 줄로 줄바꿈되는지 여부
줄바꿈된 줄들의 교차축 정렬
flex-direction: row | align-items: center | justify-content: flex-start | flex-wrap: nowrap | align-content: stretch다양한 크기의 아이템을 가진 flex 컨테이너로 flexbox 정렬 효과를 시연
row - 아이템이 수평으로 흐름 (왼쪽에서 오른쪽으로)row-reverse - 아이템이 수평으로 흐름 (오른쪽에서 왼쪽으로)column - 아이템이 수직으로 흐름 (위에서 아래로)column-reverse - 아이템이 수직으로 흐름 (아래에서 위로)nowrap - 아이템이 한 줄에 유지됨wrap - 필요에 따라 아이템이 새 줄로 줄바꿈됨wrap-reverse - 아이템이 역순으로 새 줄로 줄바꿈됨flex-start - 교차축의 시작점에 아이템 정렬center - 교차축의 중앙에 아이템 정렬flex-end - 교차축의 끝점에 아이템 정렬stretch - 교차축을 채우도록 아이템 늘림baseline - 베이스라인을 따라 아이템 정렬flex-start - 주축의 시작점에 아이템 배치center - 주축의 중앙에 아이템 배치flex-end - 주축의 끝점에 아이템 배치space-* - 아이템 사이에 공간 분배