자식 요소 정렬하기

justify-content - 기본 축으로 정렬하기

• justify-content 
  • flex-start : 자식 요소에 시작 방향으로 정렬 
  • flex-end : 자식 요소를 종료 방향으로 정렬
  • center : 자식 요소를 가운데 정렬
  • space-between : 자식 요소의 좌우 여백만 균일하게 정렬
  • space-around : 자식 요소의 여백을 균일하게 정렬
  • space-evenly : 자식 요소의 여백을 양끝까지 균일하게 정렬

See the Pen content by 신범식 (@ulqsqjpw-the-solid) on CodePen.

 

align-content, align-items - 반대 축으로 정렬하기

• align-content은 자식 요소가 여러 개라서 줄 바꿈이 필요할 때 사용 align-items : 자식 요소가 1개이거나 줄 바꿈이 필요 없을 때 사용
  
  • 속성값은 justify-content 와 같음