정렬과 justification: justify-content, align-items, align-self

"가운데 정렬이 옛날엔 CSS 인터뷰 질문. 이제는 두 줄."

두 동사: Justify 와 Align

Flexbox 가 정렬 패밀리 둘 가짐, 축마다 하나:

• justify-* — main 축 (항목 흐르는 방향) 에 작용.
• align-* — cross 축 (main 에 수직) 에 작용.

일관된 어휘: justify = 따라, align = 가로질러. Grid 까지 운반 — 같은 prefix 가 같은 거 뜻함.

justify-content: 항목이 main 따라 앉는 자리

Main 축 따라 추가 공간이 어떻게 분배:

• flex-start — 항목이 main 축 시작에 packed (기본). 추가 공간이 끝.
• flex-end — 항목이 끝에 packed. 추가 공간이 시작.
• center — 항목이 가운데 packed. 추가 공간이 양 끝 나뉨.
• space-between — 항목 사이 동등 공간; 끝에 공간 없음.
• space-around — 각 항목 주위 동등 공간; 끝이 항목 간 공간의 절반.
• space-evenly — 끝 포함 어디나 동등 공간.

align-items: 항목이 cross 따라 앉는 자리

항목이 cross 축 (자기 줄 안) 에 어떻게 정렬:

• stretch — 기본. 항목이 cross 축 채우게 stretch.
• flex-start — 항목이 cross 축 시작에 정렬.
• flex-end — 항목이 끝에 정렬.
• center — 항목이 cross 축 가운데.
• baseline — 항목이 텍스트의 baseline 으로 정렬. 항목이 다른 font 크기 가지고 텍스트 바닥이 line up 되길 원할 때 유용.

한 줄씩 가운데 정렬

유명한 "이거 수직 가운데 정렬" 질문, 해결:

.container {
  display: flex;
  justify-content: center;  /* 수평 가운데 */
  align-items: center;       /* 수직 가운데 */
}

또는, Grid 로 (더 짧게): display: grid; place-items: center;.

align-self: 한 자식 override

대부분 항목이 한 방향으로 정렬되어야 하지만 하나가 달라야 할 때, 자식의 align-self 가 부모의 align-items override:

align-content: Multi-line Flex 용

flex-wrap: wrap 이 여러 줄 만들 때, align-content 가 그 줄들이 cross 축 공간에 어떻게 분배되는지 제어 (justify-content 가 main 축에서 항목을 분배하는 것과 비슷). justify-content 와 같은 값: flex-start, center, space-between 등.

align-content (줄) 와 align-items (한 줄 안 항목) 헷갈리지 마. 둘 다 cross 축이지만 다른 레벨에서 작동.

place-content 약자

place-content: center = align-content: center; justify-content: center;. place-items: center = align-items: center; justify-items: center; (Grid). place-self: center = align-self: center; justify-self: center; (Grid). 간결한 코드에 유용; 읽기 좋은 코드는 longhand 써.

정렬로서의 margin: auto

margin-left: auto 가진 flex 자식이 왼쪽의 사용 가능한 main 축 공간을 다 소비, 오른쪽으로 밀어. 이렇게 justify-content 없이 왼쪽에 로고, 오른쪽에 메뉴 있는 navbar 만듦:

margin-right: auto 는 반대 — 뒤의 모든 걸 오른쪽으로 밀어. Column flex 의 margin-top: auto 가 바닥으로 밀어. margin: auto 가 양 축에 가운데 정렬 (옛 "margin auto 로 가운데 정렬" 패턴의 source, 이제 일반화).

흔한 패턴, 축소

피파의 노트