CSS3_flex grid

flex 배치

• 그리드 레이아웃 방식을 기본으로 해 플렉스 아이템을 원하는 위치에 배치한다.

• 아이템의 크기, 배치 방향, 순서, 정렬 방법, 간격 등 제어 가능

• 콘텐츠를 flex container로 묶은 후 안에 flex item을 배치

• flex item은 주축을 따라 왼쪽 -> 오른쪽 배치 된 후,
  끝점에 닿으면 교차축을 따라 아래도 이동 후 다시 왼쪽 -> 오른쪽 배치

  

  ex)예제코드
  http://127.0.0.1:5500/study/CSS3/flex/flex.html

grid 배치배치

• 가로 열과 세로 행으로 구성
• 칼럼(column)과 로우(row)로 구분, 크기 지정 가능
• column gap, row gap 사이 간격 지정 가능
• 콘텐츠를 grid container로 묶은 후 안에 item을 배치
  

-> grid 라인

• 위치를 숫자로 지정함
  

ex)예제코드
http://127.0.0.1:5500/study/CSS3/grid/grid_ex.html

**flex와 grid는 사용이 많지 않은편