[ CSS ] Flex / Grid

Flex와 Grid의 차이점

Flex : 1차원 레이아웃

• 수평/수직 영역 둘 중 하나의 방향으로만 레이아웃을 나눌 수 있음

Grid : 2차원 레이아웃

• 수평/수직 동시에 레이아웃을 나눌 수 있음

✔ 레이아웃을 만들 때 행, 열 중 하나만 다룬다면 Flex, 둘 다 다룬다면 Grid를 고려해보기!(메인 컨텐츠는 Grid, 그 안의 섹션은 Flex 이런식으로..!)

---

01. Flex

: 한 방향 레이아웃 시스템

기본 구조

Flex 레이아웃은 부모인 flex-container가 자식인 flex-item들을 감싸는 형태로 구성
(display: flex; 를 적용하면 row로 나열됨)

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

속성

• flex-container 속성
  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
    
    
• flex-item 속성
  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

01-1. display

: Flex를 사용하려면 부모 요소(flex-container)에 display 적용
(inline-flex는 거의 사용하지 않음)

.flex-container { 
  display: flex;
}

.flex-container {
  display: inline-flex;
}

01-2. flex-direction

: item이 배치될 방향을 지정하는 속성

• row - 좌에서 우로 수평 정렬 (기본값)

• row-reverse - 우에서 좌로 수평 정렬

• column - 위에서 아래로 수직 정렬

• column-reverse - 아래에서 위로 수직 정렬
  
  

01-3. flex-wrap

: container보다 item들의 폭이 넓을 때 한 줄로 배치할지 여러 줄로 배치할지 결정하는 속성

• nowrap - item들을 한 줄로 정렬. 이때 item의 폭은 container에 맞게 축소됨 (기본값)

• wrap - item들의 폭이 container보다 클 경우 여러 줄로 정렬

• wrap-reverse - flex-wrap: wrap;과 동일하나 아래에서 위로 정렬

01-4. flex-flow

: flex-direction과 flex-wrap 속성을 같이 사용할 수 있는 속성 (기본값은 row nowrap)

.flex-container { 
  display: flex;
  flex-flow: column wrap;
}

01-5. justify-content

: item의 가로 정렬 방법을 선택하는 속성

• flex-start - 왼쪽 정렬 (기본값)

• flex-end - 오른쪽 정렬

• center - 가운데 정렬

• space-between - item 사이 간격 균등하게 정렬

• space-around - item 좌우 여백(padding) 균등하게 정렬

---

02. Grid

: 두 방향 레이아웃 시스템

기본 구조

grid-template-columns 속성을 이용하여 행을
grid-template-rows 속성을 이용하여 열을 바꿀 수 있음