플렉스박스 축

정의

플렉스박스는 여러 요소를 한 줄 또는 한 열로 나란히 배치하고 정렬하는 방식입니다. 핵심은 '주축(main axis)'과 '교차축(cross axis)'이라는 두 방향입니다. 방향을 가로(row)로 두면 주축이 가로가 되고, 세로(column)로 바꾸면 주축이 세로로 바뀝니다. justify는 주축을 따라 요소를 배치하고, align은 주축과 직각인 교차축을 가로질러 배치합니다. 이 두 단어를 서로 다른 방향에 붙여 두는 것이 플렉스박스 이해의 출발점입니다. 처음에는 두 축이 헷갈리지만, 지금 주축이 어느 쪽을 향하는지 방향 설정 하나만 확인하면 나머지는 자연스럽게 따라옵니다. 크기를 일일이 지정하지 않아도 자식 요소들이 알아서 자리를 나눠 갖는다는 점이 플렉스박스를 편리하게 만드는 가장 큰 특징입니다.

왜 중요한가

실무에서 만드는 레이아웃의 상당수가 플렉스박스로 해결됩니다. 헤더의 로고와 메뉴를 양 끝으로 벌리거나, 버튼 안의 아이콘과 글자를 세로 가운데로 맞추거나, 카드 여러 개를 같은 높이로 늘어놓는 일이 모두 플렉스박스의 영역입니다. 두 축의 개념을 익혀 두면 '가운데 정렬이 왜 안 되지' 하는 흔한 상황에서 어느 축을 건드려야 할지 곧바로 판단할 수 있습니다. 예전에는 이런 정렬을 위해 복잡한 계산과 편법을 동원해야 했지만, 지금은 방향과 정렬 속성 몇 개만으로 대부분이 깔끔하게 해결됩니다. 방향과 정렬을 분리해서 생각하는 습관은 복잡한 화면을 훨씬 차분하게 다루게 해 주고, 나중에 배우는 그리드로도 자연스럽게 이어집니다.

흔한 실수

• 방향을 세로로 바꿔 놓고도 justify로 좌우 정렬을 시도하는 경우입니다. 세로 방향에서는 주축이 세로라 justify가 위아래를 다루고, 좌우는 align이 담당합니다. 방향이 바뀌면 두 단어의 역할도 통째로 뒤바뀐다는 점을 놓치면 아무리 값을 바꿔도 요소가 움직이지 않습니다.
• 모든 정렬을 margin과 빈 요소로 억지로 맞추려는 것입니다. justify와 align만으로도 대부분의 배치가 해결되는데, 이를 모르면 불필요한 요소가 늘어나 코드가 복잡해지고 나중에 간격을 바꾸기도 어려워집니다.
• 한 줄에 다 들어가지 않는데도 줄바꿈을 허용하지 않아 요소가 삐져나오거나 찌그러지는 경우입니다. 화면이 좁아질 가능성이 있다면 자연스럽게 다음 줄로 넘어가도록 함께 설정해 두세요.

실무 팁

• justify와 align이 헷갈릴 때는 '방향을 바꾸면 두 축의 역할도 통째로 뒤바뀐다'는 한 문장만 기억하세요. 지금 주축이 가로인지 세로인지부터 확인하면 어느 속성을 만져야 할지가 저절로 정해져, 정렬 실수가 크게 줄어듭니다.
• 가로세로 모두 가운데로 맞추고 싶다면 justify와 align을 각각 center로 두세요. 두 축을 동시에 다룬다는 감각이 잡히면 화면 어디에서든 완벽한 중앙 정렬을 쉽게 만들 수 있습니다.
• 요소 사이의 간격은 margin 대신 부모의 gap으로 주세요. gap은 요소들 사이에만 균등하게 간격을 넣어 주므로, 양 끝에 불필요한 여백이 생기지 않아 계산이 훨씬 단순해지고, 요소를 추가하거나 지워도 간격이 저절로 맞춰집니다.

관련 개념