Flex Containers 속성 - justify-content

주 축(main-axis)의 정렬 방법을 설정한다.

값	의미	기본값
flex-start	Items를 시작점(flex-start)으로 정렬	flex-start
flex-end	Items를 끝넘(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

justify-content: 정렬방법;

 

정렬 방식

 

.container{
  border: 4px solid;
  display: flex;
  justify-content: space-around;
}

.container .items{
  width: 150px;
  height: 100px;
  background: tomato;
  border: 4px dashed red;
  border-radius: 10px;
}

다음과 같이 사용이 되며, 스타일 적용할때 물론 items들의 정렬이 달라지지만, 선언은 부모클래스인 container에 해야한다는걸 잊지말길.