[CSS] Flexbox / Grid

Flexbox

• justify-content
  아래 값들을 인자로 받아 요소들을 가로선 상에서 정렬한다.

  • flex-start: 요소들을 컨테이너의 왼쪽으로 정렬한다.
  • flex-end: 요소들을 컨테이너의 오른쪽으로 정렬한다.
  • center: 요소들을 컨테이너의 가운데로 정렬한다.
  • space-between: 요소들 사이에 동일한 간격을 둔다.
  • space-around: 요소들 주위에 동일한 간격을 둔다.

• align-items
  아래 값들을 인자로 받아 요소들을 세로선 상에서 정렬한다.

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

• flex-direction
  아래 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정한다.

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

Flex의 방향이 column일 경우 justify-content의 방향이 세로로, align-items의 뱡향이 가로로 바뀐다.

• Order
  Flex 요소의 순서를 지정한다. 기본값은 0이며 양수나 음수로 바꿀 수 있다.

  #pond {
      display: flex;
  }
  
  .yellow {
      order:1
  }

• align-self
  지정된 align-items 값을 무시하고 Flex 요소를 세로선 상에서 정렬한다. align-items가 사용하는 인자와 같은 값을 사용한다.

• flex-wrap
  Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다.

  • nowrap: 모든 요소들을 한 줄에 정렬한다.
  • wrap: 요소들을 여러 줄에 걸쳐 정렬한다.
  • wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬한다.

• flex-flow
  flex-direction과 flex-wrap이 주로 같이 사용되기 때문에 두 개의 인자를 한 번에 사용할 수 있는 속성이다.

  #pond {
      display: flex;
      flex-flow: column wrap;
  }

• align-content
  Flex 컨테이너 사이의 간격을 조절한다.

  • flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬한다.
  • flex-end: 여러 줄들을 컨테이너의 바닥에 정렬한다.
  • center: 여러 줄들을 세로선 상의 가운데에 정렬한다.
  • space-between: 여러 줄들 사이에 동일한 간격을 둔다.
  • space-around: 여러 줄들 주위에 동일한 간격을 둔다.
  • stretch: 여러 줄들을 컨테이너에 맞도록 늘린다.

---

Grid

• grid-row
  Grid상에서 아이템이 놓일 행의 시작과 끝을 설정한다.

  #water {
    grid-row : 2 / 4 
    //start : 2 , end : 4
  }

• grid-column
  Grid상에서 아이템이 놓일 열의 시작과 끝을 설정한다.

  #water {
    grid-column : 2 / 4 
    //start : 2 , end : 4
  }

✅ span 키워드를 사용하여 그리드 항목이 아닌 넓이를 지정할 수도 있다.

#water {
  grid-column-start: 2;
  grid-column-end: span 2;
}

• grid-area
  grid-row와 grid-column을 한 번에 입력할 수 있다.

  #water {
    grid-area: 1/2/4/6
  }
  //grid-row-start, grid-column-start, grid-row-end, grid-column-end 순

• order
  grid 요소의 순서를 지정할 수 있다. 기본값은 0이며, 양수와 음수의 값 모두 설정 가능하다.

• grid-template-rows, grid-template-columns
  grid 상에서 행/열들의 비율을 설정할 수 있다.

  #garden {
      display: grid;
      grid-template-columns:50%
      grid-template-rows: 20% 20% 20% 20% 20%;
  }

✅ repeat 함수를 사용하여 동일한 너비를 가진 행/열을 만들 수 있다.

#garden {
  	display: grid;
	grid-template-rows: repeat(5,20%)
}

• grid-template
  grid-template-rows와 grid-template-columns를 한 번에 입력할 수 있다.

#garden {
    display: grid;
    grid-template: 50% 50% / 200px;
    //rows, columns 순
}

✅ Grid에서 사용할 수 있는 단위

• px
• %
• em
• fr : 사용 가능한 공간을 하나로 공유하여 비율에 따라 할당

---

Flexbox Froggy와 Grid Garden을 통해 Flexbox와 Grid의 개념을 실습해볼 수 있다.

Flexbox Froggy : https://flexboxfroggy.com/#ko

Grid Garden : https://cssgridgarden.com/#ko