플렉스 박스: 'justify-content '

justify-content는?

'justify-content' 속성을 이용하면 아이템들을 메인축 기준으로 정렬할 수 있다.

 

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

 

justify-content: 속성값;

 

속성값	설명
flex-start	기본 설정값과 같은 값. 수평축이 메인축일때 수평축 좌측부터 정렬. 수직축이 메인축일때 수직축 위쪽부터 정렬.
flex-end	수평축이 메인축일 땐 수평축 우측부터 정렬. 수직축이 메인축일 땐 수직축 아래부터 정렬.
center	수평축이 메인축일 땐 수평축 가운데 정렬. 수직축이 메인축일 땐 수직축 가운데 정렬.
space-around	아이템 간에 동일한 간격을 주고 나열한다. 수평축이 메인축일 땐 수평축 기준 아이템끼리 동일한 간격으로 정렬. 수직축이 메인축일 땐 수직축 기준 아이템끼리 동일한 간격으로 정렬. 이때 아이템끼리는 동일한 간격으로 정렬됨. 하지만 양끝 아이템과 경계선 사이 간격은 아이템 간격과 같지 않다.
space-evenly	아이템 간에 동일한 간격을 주고 나열한다. 수평축이 메인축일 땐 수평축 기준 아이템끼리 동일한 간격으로 정렬. 수직축이 메인축일 땐 수직축 기준 아이템끼리 동일한 간격으로 정렬. 이땐 아이템끼리 동일한 간격으로 정렬됨. 양끝 아이템과 경계선 사이도 아이템끼리 거리와 같은 간격으로 정렬함.
space-between	아이템 간에 동일한 간격을 주고 나열한다. 수평축이 메인축일 땐 수평축 기준 아이템끼리 동일한 간격으로 정렬. 수직축이 메인축일 땐 수직축 기준 아이템끼리 동일한 간격으로 정렬. 하지만 이떄는 양끝 아이템과 경계선 사이는 간격이 없음.

 

1. 'flex-start' ( 메인축 중심으로 아이템을 왼쪽 → 오른쪽, 위 → 아래로 정렬한다. )

 

 

기본 정렬과 같은 정렬.

 

수평축이 메인축일때 수평축 좌측부터 아이템 정렬.

수직축이 메인축일때 수직축 위쪽부터 아이템 정렬.

 

2. 'flex-end' ( 메인축 중심으로 아이템을 오른쪽→왼쪽, 아래 →위로 정렬한다. )

 

 

기본정렬과 반대되는 정렬

 

수평축이 메인축일 땐 수평축 우측부터 아이템 정렬.

수직축이 메인축일 땐 수직축 아래부터 아이템 정렬.

 

3. 'center' ( 메인축 중심으로 아이템을 중간에 정렬한다.  )

 

 

아이템을 메인축 중심으로 중간 정렬한다.

 

수평축이 메인축일 땐 아이템을 수평축 가운데 정렬.

수직축이 메인축일 땐 아이템을 수직축 가운데 정렬.

 

4. 'space-around' ( 아이템 사이에 동일한 간격을 주고 나열한다. )

 

 

아이템 사이에 간격을 준다.

 

양끝 아이템과 테두리 사이에 간격을 준다.

 

다만 양끝 아이템과 테두리 사이 간격과 아이템 간의 간격이 다르다.

 

메인축이 수평축일 떄는 수평으로 간격을 주고, 메인축이 수직축일 떄는 수직으로 간격을 준다.

 

5. 'space-evenly' ( 아이템 사이에 동일한 간격을 주고 나열한다. )

 

 

아이템 사이에 간격을 준다.

 

양끝 아이템과 테두리 사이에 간격을 준다.

 

'space-around'와 달리 양끝 아이템과 테두리 사이 간격과 아이템 간의 간격이 같다.

 

메인축이 수평축일 떄는 수평으로 간격을 주고, 메인축이 수직축일 떄는 수직으로 간격을 준다.

 

6. 'space-between' ( 아이템 사이에 동일한 간격을 주고 나열한다. )

 

 

아이템 사이에 간격을 준다.

 

양끝 아이템과 테두리 사이에 간격은 주지 않는다.

 

메인축이 수평축일 떄는 수평으로 간격을 주고, 메인축이 수직축일 떄는 수직으로 간격을 준다.