[HTML/CSS] Flexbox: 헷갈리기 쉬운 justify-content와 align-items 속성 정리

css에서 정말 자주 사용하는 flex!

오늘은 flex 속성 2탄!

자주 헷갈리는  justify-content와 align-items 속성의 개념 정리하기

 

flex 컨테이너 내부 아이템들을 어떻게 정렬할지를 결정하는  justify-content와 align-items !

 

justify-content: 주축에 대한 정렬

justify-content 속성은 flex 컨테이너 내의 아이템들을 주축(main axis)을 따라 어떻게 정렬할지를 결정한다.

주축은 디폴트가 수평 방향(flex-direction: row)임

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

 

• flex-start: 아이템들을 주축의 시작 부분으로 정렬 (기본값)
• flex-end: 아이템들을 주축의 끝 부분으로 정렬.
• center: 아이템들을 주축의 가운데로 정렬
• space-between: 첫 번째 아이템은 주축의 시작 부분에, 마지막 아이템은 끝 부분에 배치하고 나머지 아이템들은 사이에 고르게 배치
• space-around: 아이템들 사이에 고르게 여백을 두고, 시작과 끝에도 반만큼의 여백을 둠
• space-evenly: 아이템들 사이에 고르게 여백을 두고, 시작과 끝에도 동일한 여백을 둠

 

 

align-items: 교차 축 에 대한 정렬

align-items 속성은 flex 컨테이너 내의 아이템들을 교차 축(cross axis)을 따라 어떻게 정렬할지를 결정한다.

교차 축은 주축에 수직인 방향

See the Pen Untitled by 김두희 (@ctpfpijl-the-looper) on CodePen.

 

 

• flex-start: 아이템들을 교차 축의 시작 부분으로 정렬 
• flex-end: 아이템들을 교차 축의 끝 부분으로 정렬 
• center: 아이템들을 교차 축의 가운데로 정렬 
• stretch: 아이템들을 교차 축을 따라 늘려서 컨테이너에 맞춤 (기본값)
• baseline: 아이템들을 텍스트 기준선(baseline)에 맞춰 정렬 

 

 

-끝-