flex는 기본이 row라 가로로 배치가 된다.

  1. justify-content: 이 속성은 플렉스 컨테이너(flex container) 내에서 플렉스 아이템(flex items)의 수평 정렬을 결정합니다. 주 축(main axis)에 따라 아이템이 어떻게 배치될지 정합니다. 예를 들어, flex-start, flex-end, center, space-between, space-around 등의 값으로 설정할 수 있습니다.
  2. align-items: 이 속성 역시 플렉스 컨테이너 내에서 사용되며, 플렉스 아이템들을 교차 축(cross axis)을 기준으로 정렬합니다. 즉, **justify-content**가 가로 정렬을 담당한다면, **align-items**는 세로 정렬을 담당합니다. flex-start, flex-end, center, baseline, stretch 등의 값을 사용할 수 있습니다.
  3. align-content: 이 속성은 플렉스 라인들의 교차 축에 대한 정렬을 설정합니다. **align-items**가 개별 아이템의 정렬을 결정한다면, **align-content**는 여러 줄의 플렉스 아이템들 사이의 간격과 분포를 조절합니다. flex-start, flex-end, center, space-between, space-around, stretch 등의 값을 사용합니다. 이 속성은 여러 줄의 플렉스 아이템이 있을 때만 효과가 있습니다.
  4. text-align: 이 속성은 텍스트 내용의 수평 정렬을 정의합니다. 플렉스 레이아웃과는 관련이 없으며, 주로 블록 레벨 요소나 인라인 블록 요소 내의 인라인 콘텐츠(예: 텍스트) 정렬에 사용됩니다. left, right, center, justify 등의 값을 사용할 수 있습니다.