상자에 자리가 남았다. 자식들이 몫을 흥정했다.

요약

• W3C가 2009년 7월 23일 공개한 첫 Flexible Box Layout 작업 초안은 상자 안의 요소가 남는 공간으로 커지고 부족할 때 줄어드는 방식을 설명했다. 초기 속성 가운데 box-flex가 있었다.
• 2012년 9월 18일의 후보 권고안은 display: flex와 성장, 축소, 기준 크기 규칙을 사용했다. 2018년 11월 19일의 후보 권고안은 화면 순서를 바꿔도 문서, 음성, 키보드 이동 순서는 함께 바뀌지 않는다고 강조했다.

도구 막대의 세 자식은 벽이 움직이는 집에 살았다. 검색 칸은 다리를 뻗고 싶었다. 이름이 긴 버튼은 글자마다 자리를 달라고 했다. 셋째는 지금 너비가 좋았지만 창을 좁히자 생각이 달라졌다. 고정 폭의 가구 배치는 작은 화면 앞에서 금세 난처해진다. Flexbox는 부모 상자에 분배 규칙을 적어 줬다. 가족 회의가 조용해진 것은 아니지만, 이제 누가 얼마를 받는지 셀 수 있었다.

W3C가 2009년 7월 23일 공개한 첫 Flexible Box Layout 작업 초안은 인터페이스를 위한 상자를 그렸다. 자식은 가로 또는 세로로 놓이고, 남는 자리를 차지하거나 모자라면 줄어들 수 있었다. 문서는 XUL 인터페이스의 상자 모델을 바탕으로 삼았다고 밝혔다. 그때의 CSS 이름은 display: box, box-orient, box-flex, box-lines였다. 오래된 명칭은 아이디어의 출발점을 보여 준다. 지금의 스타일시트에 그대로 복사해 넣으라는 처방전은 아니다.

box-flex는 상대적인 유연함을 나타냈다. 값이 둘인 자식은 값이 하나인 자식보다 큰 몫을 받을 수 있다. 하지만 최대 너비에 닿으면 성장이 멈추고 남은 자리는 형제에게 돌아간다. 콘텐츠 자체의 크기와 최소 크기도 계산에 들어간다. 부모가 방을 마련하고 자식은 정해진 한계 안에서 몫을 챙긴다. 창의 너비가 바뀔 때마다 가구를 바닥에 다시 못 박는 것보다 나았다.

W3C의 2012년 9월 18일 후보 권고안은 규칙을 새로 정리했다. display: flex나 inline-flex가 컨테이너를 만들고 자식은 주축을 따라 놓인다. 다른 방향에는 교차축이 있다. flex 단축 속성은 기준 크기, 성장 인자, 축소 인자를 묶었다. 처음 얼마를 차지하는지, 남는 공간을 얼마나 받는지, 모자랄 때 얼마나 양보하는지 정하는 것이다. 검색 칸이 여백을 흡수하면서 메뉴 버튼은 누를 만한 크기를 지킬 수 있다. 창을 줄이면 브라우저가 다시 계산한다.

성장 값 둘이 최종 너비를 언제나 이웃의 두 배로 만든다는 뜻은 아니다. 두 자식의 출발 크기와 한계가 다를 수 있다. 양의 여백은 성장 인자에 따라 나뉘고, 부족한 공간에는 축소 인자와 크기가 함께 작용한다. 중요한 질문은 컨테이너가 달라질 때 누가 변화를 떠안느냐다. 작성자가 그 관계를 CSS에 쓰면 브라우저는 새 창 너비마다 산수를 다시 한다.

자리에는 방향도 있다. 줄을 반대로 읽게 하거나 세로 열로 만들 수 있다. 줄바꿈을 허용하면 못 들어간 자식은 다음 줄로 이동한다. 정렬 규칙은 두 축을 따라 요소를 배치한다. 가로 상자를 세로 상자 안에 넣어 더 큰 화면을 만들 수도 있다. 그렇지만 각 flex 컨테이너가 먼저 해결하는 것은 자기 주축의 공간 배분이다. 행과 열의 전체 계획을 세우는 CSS Grid와 구분되는 일이다.

그러다 자식들은 자리 바꾸는 재주를 배웠다. 2012년 문서의 order는 화면에서 보이는 배치를 바꾼다. 그러나 음성 읽기와 기본적인 순차 탐색은 문서의 원래 순서를 따른다. 화면의 첫 버튼이 키보드 초점을 받을 때는 뒤늦게 등장할 수 있다. 마우스를 쥔 독자와 Tab키를 누르는 독자가 같은 막대에서 다른 길을 걷는 셈이다. 가족사진의 자리를 바꿔도 출석부 순서는 그대로였다.

W3C의 2018년 11월 19일 후보 권고안은 이 점을 더욱 분명히 했다. order와 역방향 속성은 시각적 배치를 위한 도구다. 잘못 놓인 원본 순서를 고치는 수단은 아니다. 남는 자리의 산수에도 단서가 있다. 성장 값이 일보다 작으면 양의 공간이 일부 남을 수 있다. 유연하다는 말이 마지막 픽셀까지 모두 먹어야 한다는 뜻은 아니다. 줄 끝의 빈칸은 브라우저가 규칙을 정확히 따른 결과일 수 있다.

버튼의 이름이 다른 언어로 더 길어지면 시작 크기가 달라진다. 최소 너비가 있으면 생각만큼 줄어들지 않는다. 줄바꿈은 다음 줄에서 새 계산을 연다. Flexbox는 이 조건에 반응할 뿐, 독자에게 어떤 동작이 더 중요한지 스스로 정하지 않는다. 제작자는 먼저 사용 순서와 중요도를 정해야 한다. 그 뒤에 기준 크기, 인자, 정렬을 고른다.

Flexbox는 부모 상자를 바뀌는 공간 예산의 관리자로 만들었다. 자식은 정해 둔 몫과 한계에 맞춰 커지거나 양보하고 브라우저는 창이 움직일 때마다 재계산한다. 문서의 의미 있는 순서를 정하는 일은 여전히 작성자 몫이다. 버튼끼리는 남는 자리를 놓고 흥정해도 좋다. 독자에게 화면과 키보드의 서로 다른 지도를 들이밀지는 말자.