display flex 3 justify-content

---

 

1. 주축을 기준으로 item을 정렬 하는 방법

display : flex 인 Container는 item들의 정렬은 어떻게 할까요?

justify-content 속성을 이용해서 정렬 할 수 있습니다.

justify-content 는 주축을 기준으로 item들을 정렬 합니다.

여기서 주축은 'flex-direction: 값' 의 값을 의미 합니다.

.container{
	display: flex;
    flex-direction: row; //기본값
    justify-content: flex-start;
}

 

flex-start : 시작점 부터 정렬

flex-end : 끝점 부터 정렬

center : 가운데 정렬

space-between : 첫번째 item은 시작점에, 마지막 item은 끝점에, 나머지 item은 골고루 정렬

space-around : item들 사이의 모두 동일한 여백으로 정렬

 

 

 

주축의 반대가 되는 축은 교차축 입니다. 교차축을 기준으로 item을 정렬 하고 싶다면 아래를 읽어주세요.

display flex5, align-items align-content , 아이템 정렬 방법