flex

flex란?

• 레이아웃 배치를 전용으로 하는 기능으로 최근에는 float를 대신해 많이 사용되고 있다. flexble box, flexbox라고 불리기도 한다.

부모요소에 쓸 수 있는 속성

• justify-content(가로축에서 이동)

  • flex-start: 요소들을 왼쪽으로 정렬
  • flex-end: 요소들을 오른쪽으로 정렬
  • center: 요소들을 가운데로 정렬
  • space-around: 요소들 사이에 동일한 간격을 두고 정렬

    

  • space-between: 요소들 주위에 동일한 간격을 두고 정렬

    

• align-items(세로축에서 이동)

  • flex-start: 요소들을 꼭대기로 정렬
  • flex-end: 요소들을 바닥으로 정렬
  • center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬
  • baseline: 요소들을 컨테이너의 시작 위치에 정렬
  • stretch: 요소들을 컨테이너에 맞도록 늘림

• flex-direction(row, column 방향 설정)

  • row: 요소들을 텍스트의 방향과 동일하게 정렬
  • row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
  • column: 요소들을 위에서 아래로 정렬
  • column-reverse: 요소들을 아래에서 위로 정렬

• order: 태그의 순서를 바꿔줌

• align-self: 개개인의 상하축을 이동할 수 있음

• flex-wrap: flex는 한 줄에 나오려는 성질이 있기 때문에 한 줄에 나오는걸 방지할 수 있음

  • nowrap: 모든 요소들을 한 줄에 정렬(기본값)
  • wrap: 요소들을 여러 줄에 걸쳐 정렬
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬

• align-content(세로축에서 여러 줄을 이동)

  • flex-start: 여러 줄을 꼭대기에 정렬
  • flex-end: 여러 줄을 바닥에 정렬
  • center: 여러 줄을 세로선 상에서 가운데로 정렬
  • space-around: 여러 줄들 사이에 동일한 간격을 두고 정렬

자식요소에 쓸 수 있는 속성

• flex-basis: flex 아이템의 기본 크기를 설정할 때 사용(각종 단위의 수가 들어갈 수 있으며, width를 따로 설정하지 않으면 컨텐츠의 크기로 설정된다.)

• flex-grow: 아이템이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성, 0보다 큰 값이 설정되면 해당 아이템이 원래 크기보다 커지며 빈 공간을 메우게 됨.

• flex-shrink: flex-basis의 값보다 작아질 수 있는지를 결정하는 속성, 0보다 큰 값이 설정되면 해당 아이템은 flex-basis보다 작아진다.

• flex: flex-grow, flex-shrink, flex-basis를 한번에 사용할 수 있는 속성
  ex) flex: 1 = flex-grow: 1; flex-shrink: 1; flex-grow: 0%;

grid

grid란?

• grid는 2차원(행과 열)에 대한 레이아웃 시스템을 제공한다. flex는 1차원 레이아웃만 가능함.

grid의 속성

• grid-template-columns: 행의 크기를 정의
  ex) grid-template-columns: 30% 70%;
  grid-template-columns: 3fr 7fr; -> 이 쪽을 더 많이 사용함
  grid-template-columns: repeat(3, 1fr);

• grid-template-rows: 열의 크기를 정의

• gap: 셀 사이의 간격을 의미

  • row-gap
  • column-gap
  • gap(두 가지를 한번에 쓸 수 있음)

• grid-auto-columns, rows: 통제를 벗어난 위치에 있는 크기를 지정하는 속성