자식의 grow, shrink, basis, order와 개별 정렬을 제어합니다.
flex-basis는 초기 주축 크기, grow는 남는 공간 배분, shrink는 부족한 공간 축소 비율입니다. order는 시각 순서만 바꿔 읽기 순서와 달라질 수 있습니다.
이번 예제의 출발점은 flex: 1 1 160px;입니다. 선택자가 고른 요소와 실제로 계산된 값을 개발자 도구에서 나란히 보면 선언이 적용되지 않은 이유를 빠르게 찾을 수 있습니다.
처음에는 예제를 그대로 확인한 다음 두 번째 item의 flex-grow를 3으로 바꿔보세요. 한 번에 한 값만 바꾸고 좁은 화면, 키보드 포커스와 200% 확대에서도 내용이 사라지지 않는지 확인하세요.
order로 의미 순서를 뒤집으면 키보드와 화면 읽기 순서는 원본 HTML과 달라집니다.
직접 바꿔보세요두 번째 item의 flex-grow를 3으로 바꿔보세요.