한 축을 중심으로 항목을 유연하게 배치합니다.
Flexbox는 주축과 교차축을 기준으로 항목의 크기와 정렬을 제어합니다. 메뉴, 버튼 묶음, 카드 한 줄처럼 한 방향 관계가 핵심인 UI에 적합합니다.
flex: 1은 flex-grow 1, flex-shrink 1, flex-basis 0%를 한 번에 적은 값이라 네 항목이 모두 0에서 출발해 남는 공간을 똑같이 나눠 가집니다. .stage 너비에서 12px 간격 세 개를 뺀 나머지가 넷으로 나뉘므로 A부터 D까지 내용 길이와 상관없이 같은 폭이 되고, 높이는 교차축 기본값인 stretch에 따라 줄 높이에 맞춰집니다.
flex: auto는 flex-basis가 auto라 각 항목이 자기 내용 너비에서 출발한 뒤 남는 공간을 나누므로 글자가 긴 항목이 더 넓어집니다. 내용과 상관없이 같은 폭을 원하면 이 예제처럼 flex: 1을 쓰되, 긴 단어 때문에 폭이 벌어진다면 항목에 min-width: 0을 줘 내용 최소 너비 아래로도 줄어들게 합니다.
행과 열을 동시에 정확히 맞춰야 하는 전체 격자에는 Grid가 더 단순할 수 있습니다.
직접 바꿔보세요flex-direction을 column으로 바꿔보세요.