CSS Flexbox는 요소를 행이나 열 한 방향으로 배치하고, 남는 공간을 나누거나 서로 정렬하는 레이아웃 방식이다. 메뉴, 도구 모음, 카드 안의 버튼처럼 한 줄 또는 한 방향의 흐름이 중요한 인터페이스에 활용한다. CSS에서 컨테이너에 display: flex를 지정해 사용한다.
주축과 교차축
Flexbox는 주축과 그에 수직인 교차축으로 배치를 설명한다. flex-direction이 row이면 주축은 인라인 방향을 따르고, column이면 블록 방향을 따른다. 따라서 justify-content를 항상 가로 정렬이라고 외우면 방향을 바꿀 때 혼동하기 쉽다. 주축 정렬과 교차축 정렬이라는 개념으로 이해해야 쓰기 방향이 다른 언어에도 대응하기 좋다.
공간을 나누는 값
아이템의 flex-basis는 기본 크기에 관여하고, flex-grow와 flex-shrink는 남는 공간과 부족한 공간을 분배하는 데 사용된다. 예를 들어 검색창과 검색 버튼을 같은 줄에 놓을 때 검색창이 남는 공간을 차지하도록 할 수 있다. 텍스트가 아주 길면 최소 크기 제약 때문에 예상대로 줄어들지 않을 수 있으므로 아이템의 최소 너비와 줄바꿈도 확인한다. 관련 공식 설명.
줄바꿈과 실제 예
위키 상단에 로고, 검색창과 로그인 버튼이 있다고 하자. 넓은 화면에서는 한 줄로 배치하고, 좁은 화면에서는 검색창을 다음 줄로 이동시키는 식으로 설계할 수 있다. flex-wrap은 아이템이 여러 줄을 형성하도록 허용한다. 다만 각 줄은 독립적으로 공간을 나누기 때문에 여러 줄의 같은 열을 정밀하게 맞추려면 Grid가 더 직접적인 선택일 수 있다.
읽는 순서 유지하기
배치 순서를 바꾸는 속성은 화면의 위치에 영향을 주지만 문서의 원래 읽기 순서를 동일하게 바꾸지는 않는다. 키보드 포커스가 화면에서 예상치 못한 곳으로 이동하면 사용하기 어려워진다. 반응형 웹 디자인을 적용할 때는 각 너비의 정렬뿐 아니라 긴 번역문과 확대 상태를 점검한다. 단순히 한 줄에 모두 들어간다는 이유만으로 좋은 레이아웃이라고 판단하지 않는 것이 중요하다.
참고: 공식 개발 문서.