[css]

flex란

레이아웃 배치를 위해 사용하는 코드이다.

💡요소의 방향

  flex-direction: row; - 아이템이 가로방향으로 흐른다. (좌에서 우로)
  flex-direction: row-reverse; - 아이템이 가로방향으로 흐른다. (우에서 좌로)
  flex-direction: column; - 아이템이 세로방향으로 흐른다. (상에서 하로)
  flex-direction: column-reverse; - 아이템이 세로방향으로 흐른다. (하에서 상으로)
       
        

💡flex정렬

  justify-content: end; 
  justify-content: flex-end; - 플렉스 컨테이너의 뒤쪽에서부터 배치된다.
  justify-content: flex-start; - 플렉스 컨테이너의 앞쪽에서부터 배치된다.
  justify-content: center; - 플렉스 컨테이너의 가운데에서부터 배치된다.
        

💡flex정렬 균등정렬

  justify-content: space-around; - box를 둘러싼 공백 생성, 공백이 겹치는 구간과 그렇지 않은 부분의 너비가 달라진다.
  justify-content: space-between; - box 간에만 공백을 주고 양 끝은 공백없이 배치된다.
  justify-content: space-evenly; - box 간에 동일한 공백을 생성
        
        

💡flex세로(높이 정렬)

  justify-content: flex-start; - 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치된다.
  align-items: flex-end; - 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치된다.
  align-items: flex-start; - flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치된다.
  align-items: baseline; - 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치된다.

  flex-wrap: wrap; -  플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치된다.
  flex-wrap: nowrap; - 기본 설정으로, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 대신에 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킨다.