[Web] CSS 레이아웃 - Grid, Flex 차이 및 기본 개념

CSS 레이아웃 - Grid, Flex 차이 및 기본 개념

레이아웃으로 Flex, Grid가 가장 많이 사용된다고 한다.

Flex와 Grid가 대충 어떤 느낌인지 알기 위해 작성한 글이다.

 

Flex : 한 방향 레이아웃 시스템 (1차원)

Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있고, 

 

Grid : 두 방향(가로-세로) 레이아웃 시스템 (2차원)

Grid는 2차원으로 수평, 수직을 동시에 레이아웃을 나눌 수 있다. 

---

Flex : 한 방향 레이아웃 시스템 (1차원)

부모 요소인 div.container를 Flex Container(플렉스 컨테이너)

자식 요소인 div.item들을 Flex Item(플렉스 아이템)

 

Flex 컨테이너 안(태그 안)에 있는 item들의 방향들을 결정하는데, 기본적으로는 row로 형성되어 있다. 

즉, flex는 item 자식들을 어떻게 배치할 것인가? 가 문제라고 할 수 있다. 

 

1) display: flex; 를 적용하지 않았을 경우

display: flex; 를 적용하지 않았을 경우

display: flex; 를 적용하지 않았을 경우의 결과값

 

2) display: flex; 를 적용했을 경우

display: flex; 를 적용했을 경우

display: flex; 를 적용했을 경우의 결과값

기본적으로 item들이 row로 형성되어 있기 때문에, item들이 row를 기준으로 가로로(=>) 배치된 것을 확인할 수 있다.

 

=> 여기서부터는 display: flex; 가 기본으로 들어가는 flex 속성들이다.

 

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

다음 페이지에서 계속 연습해보면서 익히면 좋을듯! 잼밋당~!~

 

Flexbox Froggy

 

 

 

3) justify-content 속성: Flex 요소들을 가로선 상에 정렬한다.

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

 

4) align-items 속성: Flex 요소를 세로선 상에서 정렬한다.

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

 

5) flex-direction 속성: 정렬할 방향을 지정한다.

flex-direction을 통해서 축을 바꿀 수 있다.

즉, 기본적으로 되어 있는 row 방향을 column으로 바꿀 수 있다.

• row: 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬 (=> 돌렸을 때 시작 지점이 같지 않다는거 조심)
• column: 요소들을 위에서 아래로 정렬
• column-reverse: 요소들을 위에서 아래로 정렬하되 반대로 정렬

 

6) order 속성: Flex 요소의 순서를 지정한다.

order 속성을 각 요소에 적용할 수 있으며, order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있다.

#pond {
  display: flex;
}

.yellow {
order: 1;
}

 

7) align-self 속성: 지정된 align-items의 값을 무시하고 Flex 요소를 세로선 상에서 정렬한다.

개별 요소에 적용할 수 있는 또 다른 속성이다.

align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용한다.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
  align-self: end;
}

 

8) flex-wrap 속성: Flex 요소들을 한 줄 또는 여러 줄에 걸쳐 정렬한다.

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

 

9) flex-flow 속성: flex-direction과 flex-wrap 속성을 간략히 한 속성이다.

flex-direction과 flex-wrap이 자주 같이 사용되기 떄문에, flex-flow가 대신할 수 있다.

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

 

10) align-content: 세로선 상에 여분의 공간이 있는 align-content: end;경우 Flex 컨테이너 사이의 간격을 조절한다.

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

 

마지막 문제!

---

Grid : 두 방향(가로-세로) 레이아웃 시스템 (2차원)

Grid는 2차원으로 수평, 수직을 동시에 레이아웃을 나눌 수 있다. 

grid-template-columns 속성을 이용하여 행을,

grid-template-rows 속성을 이용하여 열을 바꿀 수 있다.

1) display: grid; 를 적용했을 경우

get-templates-columns/rows를 줄 때 fr을 이용해서 비율형태로 줄 수도 있고,

px를 이용해 단위 형태로 줄 수도 있다.

display: grid; 를 적용했을 경우

display: grid; 를 적용했을 경우의 결과값

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

다음 페이지에서 차근히 익히는 중~!

Grid Garden

 

2) grid-column-start 속성: 그리드 요소의 시작 열(column) 위치를 지정한다.

grid-column-start이 단독으로 사용될 때는, 한 개의 그리드 열(column)을 나타낸다.

 

3) grid-column-end 속성: 그리드 요소의 마지막 열(column) 위치를 지정한다.

grid-column-start와  grid-column-end 속성을 같이 사용하면 여러 열(column)에 걸쳐 확장 가능하다.

 

* 그리드 왼쪽의 기준이 아닌 오른쪽으로 기준을 하고 싶다면, 

grid-column-start와 grid-column-end를 음수로 설정하면 된다.

 

4) grid-column 속성: 그리드 요소의 열(column) 위치를 지정한다.

매번 grid-column-start와 grid-column-end를 입력하는 것이 불편하기에 한 번에 입력가능하게 한 grid-column

/(슬래쉬)로 구분한다.

<grid-column-start>/<grid-column-end>

 

5) grid-row-start 속성: 그리드 요소의 시작 행(row) 위치를 지정한다.

 

6) grid-row-end 속성: 그리드 요소의 마지막 행(row) 위치를 지정한다.

 

7) grid-row 속성: 그리드 요소의 행(row) 위치를 지정한다.

 

8) grid-area 속성: 그리드 요소의 크기와 위치를 지정한다.

<grid-row-start>/<grid-column-start>/<grid-row-end>/<grid-column-end>

grid-area: 1 / 1 / 3 / 6;

 

등등.. 

추가해서 작성해봐야겠다.

 

 

참고)

CSS Flex와 Grid를 공부할 수 있는 게임들[https://studiomeal.com/archives/924]

Flexbox Froggy [https://flexboxfroggy.com/#ko] => 왕재밌다.

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

이번에야말로 CSS Flex를 익혀보자[https://studiomeal.com/archives/197]

이번에야말로 CSS Grid를 익혀보자[https://studiomeal.com/archives/533]