justify-content

• 주 축(main-axis)의 정렬 방법을 설정
• 속성 값
  • flex-start : items를 시작점으로 정렬
  • flex-end : items를 끝점으로 정렬
  • center : items를 가운데 정렬
  • space-between : 시작 item은 시작점에 마지막 item은 끝점에 정렬되고 나머지 item은 사이에 고르게 정렬
  • space-around : items를 균등한 여백을 포함하여 정렬
• justify-content: 정렬 방법;

align-content

• 교차축(cross-axis)의 정렬 방법을 설정. 주의할 점은 flex-wrap 속성을 통해 items가 2줄 이상이고 여백이 있을 경우에만 사용 가능!
• 속성 값
  • stretch : container의 교차 축을 채우기 위해 items를 늘림
  • flex-start : items를 시작점으로 정렬
  • flex-end : items를 끝점으로 정렬
  • center : items를 가운데로 정렬
  • space-between : 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬
• align-content: 정렬 방법;

align-items

• 교차축에서 items의 정렬 방법을 설정한다. items가 한 줄일때 많이 사용한다. 주의할 점은 items가 flex-wrap으로 2줄 이상일 경우에는 align-content 속성이 우선한다. 따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 한다.
• 속성 값
  • stretch : container의 교차 축을 채우기 위해 items를 늘림
  • flex-start : items를 각 줄의 시작점으로 정렬
  • flex-end : items를 각 줄의 끝 점으로 정렬
  • center : items를 가운데 정렬
  • baseline : items를 문자 기준선에 정렬
• align-items: 정렬 방법;

align-self

• 교차축에서 개별 item의 정렬 방법을 설정한다.
• 속성 값
  • auto : container의 align-items 속성을 상속받음
  • stretch : container의 교차 축을 채우기 위해 item을 늘림
  • flex-start : item을 각 줄의 시작점으로 정렬
  • flex-end : item을 각 줄의 끝점으로 정렬
  • center : item을 가운데 정렬
  • baseline : item을 문자 기준선에 정렬
• align-self: 정렬 방법;
• align-items은 items 전체의 정렬 방법을 변경하는 것이고 align-self는 하나의 container 안의 각각의 item들의 정렬 방법을 변경하는 것이다.