자식의 grow, shrink, basis, order와 개별 정렬을 제어합니다.
flex-basis는 초기 주축 크기, grow는 남는 공간 배분, shrink는 부족한 공간 축소 비율입니다. order는 시각 순서만 바꿔 읽기 순서와 달라질 수 있습니다.
네 항목은 flex-basis 100px에서 출발하고, .stage 너비에서 기본 폭 400px와 간격 30px를 뺀 나머지를 grow 비율 1:2:1:1로 나눠 가집니다. 그래서 B는 남는 공간을 다른 항목의 두 배만큼 받아 더 넓어집니다. .stage의 min-height 140px로 교차축에 여유가 생겨, 기본값 stretch인 A·C·D는 그 높이까지 늘어나고 align-self: flex-end인 B만 제 높이로 아래쪽에 붙습니다.
공간이 모자랄 때 줄어드는 양은 flex-shrink 값에 flex-basis를 곱한 비율로 나뉩니다. 그래서 shrink가 모두 1이어도 basis가 200px인 항목은 100px인 항목보다 두 배 많이 줄어들어, grow로 늘어날 때와 나누는 기준이 다릅니다.
order로 의미 순서를 뒤집으면 키보드와 화면 읽기 순서는 원본 HTML과 달라집니다.
직접 바꿔보세요두 번째 item의 flex-grow를 3으로 바꿔보세요.