[CS] Content 정렬 Day-14

### 콘텐츠 정렬 방법
Flexbox를 원하는대로 제어하기 위해서는 axis(축)을 잘 이해해야 합니다.
axis(축)은 main axis와 cross axis가 있습니다.

main axis는 flex-direction 속성에 의해 결정됩니다.
flex-direction의 기본 값(row) 상태 일 때 main axis는 가로축이 됩니다.

위 axis들을 기준으로 정렬할 수 있는 속성에는 justify-content와 align-items가 있습니다.

justify-content는 main axis를 기준으로 정렬하고, align-item는 cross axis를 기준으로 정렬합니다.

주의사항

flex-direction 속성의 값을 기본 값(row)에서 column으로 변경해준다면 main axis와 cross axis는 서로 바뀝니다.

따라서 일반적으로 flex-direction이 row인 상태에서 작성하고 설명하는 것이 좋습니다.

콘텐츠 수평 정렬 (justify-content)

부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있습니다.

justify-content 속성의 값이 될 수 있는 주요 옵션입니다.

• flex-start
• flex-end
• center
• space-between

콘텐츠 수직 정렬 (align-items)

부모 박스에 align-items 속성을 적용하면, 자식 박스를 수직으로 정렬할 수 있습니다.

align-items 속성 값이 될 수 있는 주요 옵션입니다.

• flex-start
• flex-end
• center
• stretch