플렉스 박스: 'align-content'

'align-content'이란?

'align-item'과 비슷하다.

 

하지만 'align-content'란 아이템이 아닌 아이템 라인을 정렬한다.

 

단, 'align-content'를 제대로 써주기 위해선 'flex-wrap'이 적용되서 라인이 두 줄이상 되어야 한다.

 

'align-content'의 속성값

'align-content'의 속성은 다음과 같이 설정해준다.

 

align-content: 속성값;

 

속성값	설명
stretch	기본 설정값.
flex-start	플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 수평축이 메인축일 때 교차축인 수직축 위쪽부터 정렬. 이때 수직축이 메인축일 때 교차축인 수평축 위쪽부터 정렬.
flex-end	플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 수평축이 메인축일 때 교차축인 수직축 아래부터 정렬. 이때 수직축이 메인축일 때 교차축인 수평축 우측부터 정렬.
center	플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. 이때 수평축이 메인축일 때 교차축인 수직축 중간에 정렬. 이때 수직축이 메인축일 때 교차축인 수평축 중간에 정렬.
space-between	플렉스 아이템이 'flex-wrap'이 적용되서  두 줄 이상일 때 줄끼리 간격을 동일하게 조절한다. 단, 이때 양 끝 아이템 라인과 박스의 테두리 사이에 간격은 주지 않는다.
space-around	플렉스 아이템이 'flex-wrap'이 적용되서 두 줄 이상일 때 줄끼리 간격을 동일하게 조절한다. 단, 이때 양 양 끝 아이템 라인과 박스 테두리 사이의 간격과 라인끼리  간격은 동일하지 않다.

 

1. 'stretch' ( 기본 설정 )

 

기본 설정값.

 

2. 'flex-start' ( 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. )

 

플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다.

 

이때 수평축이 메인축일 때 교차축인 수직축 왼쪽 위부터 정렬.

 

이때 수직축이 메인축일 때 교차축인 수평축 왼쪽 위쪽부터 정렬.

 

3. 'flex-end' ( 플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다. )

 

플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다.

이때 수평축이 메인축일 때 교차축인 수직축 왼쪽 아래부터 정렬.

이때 수직축이 메인축일 때 교차축인 수평축 우측 위부터 정렬.

 

4. 'center' ( 플렉스 아이템을 한 곳으로 모아서 공백없이 중앙에 나열한다. )

 

플렉스 아이템을 한 곳으로 모아서 공백없이 나열한다.

이때 수평축이 메인축일 때 교차축인 수직축 중간에 정렬.

이때 수직축이 메인축일 때 교차축인 수평축 중간에 정렬.

 

5. 'space-between' (플렉스 아이템이 두 줄 이상일 때 줄끼리 간격을 동일하게 조절한다.)

 

플렉스 아이템이 'flex-wrap'이 적용되서 두 줄 이상일 때 줄끼리 간격을 동일하게 조절한다.

 

단, 이때 양 끝 아이템 라인과 박스의 테두리 사이에 간격은 주지 않는다.

 

6. 'space-around' (플렉스 아이템이 두 줄 이상일 때 줄끼리 간격을 동일하게 조절한다.)

 

플렉스 아이템이 'flex-wrap'이 적용되서 두 줄 이상일 때 줄끼리 간격을 동일하게 조절한다.

 

단, 이때 양 양 끝 아이템 라인과 박스 테두리 사이의 간격과 라인끼리 간격은 동일하지 않다.