플렉스 박스: 'align-items '

align-items란?

'align-items' 속성을 이용하면 아이템들을 교차축(Cross Axis)기준으로 정렬할 수 있다.

 

'align-items'의 속성값으로 줄 수 있는 값은 다음과 같다.

 

align-items: 속성값;

 

속성값	설명
stretch	기본 설정임. 플렉스 아이템 높이가 컨테이너 높이와 같게 변경된 뒤 연이어 배치됨.
flex-start	수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 좌쪽부터 정렬
flex-end	수평축이 메인축일 때  교차축인 수직축 아래쪽부터 정렬 수직축이 메인축일 때 교차축인 수평축 우쪽부터 정렬
center	수평축이 메인축일 때 교차축인 수직축 가운데 정렬 수직축이 메인축일 때 교차축인 수평축 가운데 정렬
baseline	베이스라인을 축으로 정렬함

 

1. 'stretch' ( 기본설정 )

 

 

기본 설정임.

 

플렉스 아이템 높이가 컨테이너 높이와 같게 변경된 뒤 연이어 배치됨.

 

2. 'flex-start' ( 교차축을 중심으로 왼쪽 → 오른쪽, 위 → 아래로 정렬한다. )

 

 

수평축이 메인축일 때 아이템을 교차축인 수직축 위쪽부터 정렬

수직축이 메인축일 때 아이템을 교차축인 수평축 좌쪽부터 정렬

 

3. 'flex-end' ( 교차축을 중심으로 왼쪽 → 오른쪽, 위 → 아래로 정렬한다. )

 

 

수평축이 메인축일 때 아이템을 교차축인 수직축 아래에 정렬

수직축이 메인축일 때 아이템을 교차축인 수평축 우쪽에 정렬

 

4. 'center' ( 교차축을 중심으로 아이템을 가운데 정렬한다. )

 

 

수평축이 메인축일 때 아이템을 교차축인 수직축 가운데 정렬

수직축이 메인축일 때 아이템을 교차축인 수평축 가운데 정렬

 

5. 'baseline' ( 베이스라인을 중심으로 정렬 )

 

 

베이스라인을 축으로 아이템을 정렬함