[CSS/SCSS] justify-content 와 align-items

• justify-content
  justify-content는 Flexbox나 Grid 레이아웃에서 컨테이너 안의 자식 요소들을 가로 방향(주축)으로 어떻게 정렬할지 결정하는 속성.

justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

① flex-start (기본 값)
자식 요소들을 컨테이너의 시작 부분으로 정렬

② flex-end
자식 요소들을 컨테이너의 끝 부분으로 정렬

③ center
자식 요소들을 컨테이너의 가운데로 정렬

④ space-between
첫 번째와 마지막 자식 요소를 컨테이너의 양 끝에 배치하고, 나머지 요소들 사이의 간격을 고르게 분배

⑤ space-around
자식 요소들 주위에 동일한 간격을 배치.
각 요소의 양쪽에 간격이 생겨 요소들 사이의 간격은 양 끝 간격의 2배가 됨.

⑥ space-evenly
모든 자식 요소들 간격을 균등하게 배치(요소들 사이와 컨테이너 양 끝의 간격이 동일)

⑦ 그 외 Grid에서만 사용 가능한 값

• start : 요소들을 쓰기 방향에 따라 시작 부분으로 정렬
• end : 요소들을 쓰기 방향에 따라 끝 부분으로 정렬
• left / right : 요소들을 왼쪽 또는 오른쪽으로 정렬

• align-items
  CSS Flexbox와 Grid 레이아웃에서 보조 축(cross axis)을 기준으로 자식 요소들을 어떻게 정렬할지 지정하는 속성.
  
  보조 축(cross axis)은 기본적으로 세로 방향이므로, 자식 요소들이 컨테이너의 세로 가운데로 정렬됨.

align-items: center;
align-items: baseline;
align-items: stretch;
align-items: flex-start;
align-items: flex-end;

① stretch (기본값)
자식 요소들을 컨테이너의 보조 축 높이에 맞춰 늘어뜨리며, 자식 요소에 height가 없을 경우만 적용됨.

② baseline
자식 요소들의 텍스트 기준선(baseline)을 맞춰 정렬

③ center
자식 요소들을 보조 축의 가운데로 정렬

④ flex-start
자식 요소들을 보조 축의 시작 쪽으로 정렬

⑤ flex-end
자식 요소들을 보조 축의 끝 쪽으로 정렬