Flexbox 생성기

작동 방식

Flexbox가 복잡한 것은 아니지만, 거의 모두가 걸려드는 점이 하나 있습니다. justify-content와 align-items는 가로와 세로를 뜻하지 않습니다. 방향을 따르는 축과 그 가로지르는 축을 뜻하며, 그 방향은 직접 정하는 것입니다.

함정을 직접 짚어 보면

flex-direction: row이면 justify-content는 가로로, align-items는 세로로 작동합니다. column으로 바꾸면 둘이 완전히 뒤바뀝니다. flexbox 때문에 허비하는 시간은 사실상 전부 이것입니다. 아래의 설명은 방향을 바꾸면 함께 바뀌므로, 외우는 대신 관계를 눈으로 볼 수 있습니다.

주축과 교차축

주축은 flex-direction으로 정해지는, 항목이 흐르는 축입니다. 교차축은 그것에 수직입니다. justify-content는 주축을 따라 공간을 나누고, align-items는 교차축에서 항목의 위치를 정합니다. 이 두 이름이 익숙해지면 나머지는 자연스럽게 따라옵니다.

gap, 그리고 margin을 대체한 이유

gap은 첫 번째와 마지막 항목의 바깥에는 여백을 더하지 않고 항목 사이에만 간격을 둡니다. margin이 정확히 이 부분을 잘못 처리해서 예전에는 :last-child 편법으로 고쳤습니다. 현재 모든 브라우저가 지원하므로 더 이상 피할 이유가 없습니다.

nowrap은 넘치는 것이 아니라 줄어든다는 뜻입니다

기본값은 nowrap이며, 항목은 새 줄로 넘어가지 않고 원래 크기보다 작아져서 맞춰집니다. 그래서 flex 행 안에서 텍스트가 예상치 못하게 찌그러지는 경우가 있습니다. wrap을 지정하면 항목이 대신 아래로 내려가고, 자식 요소에 min-width: 0을 주면 내용보다 작아지는 것을 막습니다.

가로세로 모두 가운데 정렬

justify-content: center와 align-items: center를 함께 쓰면 flex-direction과 관계없이 항목이 양방향 모두 가운데에 놓입니다. 통째로 외워 둘 가치가 있는 유일한 조합입니다.