[CSS] flex에서 가로배치와 세로배치

 

핵심 개념

• 메인축(main axis) → justify-content
• 교차축(cross axis) → align-items

보통 flex-direction: row(가로 방향)일 때:

• justify-content: space-between; → 좌우 끝으로 배치
• align-items: flex-start / center / flex-end → 세로 기준 정렬

 

가로배치는 양끝으로,

세로배치는 맨 아래로.

 

• 좌우 끝으로 배치 → justify-content: space-between;
• 세로 아래로 붙이기 → align-items: flex-end;