[CSS] Justify content and Allign items

Justify content와 Allign items은 item의 부모인 container level에서 가지는 속성들이다.

두 속성은 중심축과 교차축에 기준하여 items를 정렬하기 때문에 축을 이해하는 것이 중요하다.

 

Justify-content

Justify content는 items 들을 가로축을 기준으로 정렬한다.

예를들어, justify-content에 center 값을 주면 중심축을 기준으로 중앙으로 정렬된다.

 

 

.container {
display: flex;
flex-direction: row;
justify-content: center;
}

 

 

 

Allign-items

Align-items는 items들을 컨테이너의 세로축을 기준으로 정렬한다.

예를들어, align-items에 center 값을 주면 세로축을 기준으로 중앙으로 정렬된다.

 

 

.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}

 

 

 

justify-content와 align-items의 속성값은 아래와 같다.

justify-content

• flex-start(default)
• flex-end
• center
• space-between
• space-around

 

align-items

• flex-start(default)
• flex-end
• center
• baseline
• stretch

 

참고 : https://naradesign.github.io/article/flex-justify-align.html