CSS flex, grid 속성 쉽게 이해하기

flex, grid 속성에 대해 작성된 글입니다.

• flex 본문 바로가기
• grid 본문 바로가기

 

CSS flex

flex box 브라우저별 지원 현황 (2020.07.07 기준)

 

1. 기본 구성

플렉스 박스(flex box)는 플렉스 컨테이너(flex container)와 플렉스 요소(flex item)로 구성됩니다.

 

플렉스 요소에  width, height 속성을 추가합니다.  

<!-- HTML -->
<div class="container">
   <div class="item chicken"></div>
   <div class="item salmon"></div>
   <div class="item steak"></div>
   <div class="item kebab"></div>
</div>

/* CSS */
.item {
  width: 100px;
  height: 100px;
}

 

2. flexbox

flex는 단일 레이아웃 방향이므로 flex 항목은 행 또는 열로 정렬됩니다. 기본값은 rows입니다.

컨테이너 요소에 display: flex 속성을 추가합니다.

 

display

1. flex : block 특성의 컨테이너를 정의합니다. (수직 쌓임)

2. inline-block : inline 특성의 컨테이너를 정의합니다. (수평 쌓임)

이 속성은 플렉스 요소가 아니라 컨테이너에만 영향을 주기 때문에 속성의 값 달라져도 컨테이너 내부의 요소에는 영향을 주지 않습니다.

/* CSS */
.container {
  display: flex;
}

 

flex-direction (방향)

1. row : 기본 설정으로, 플렉스 요소는 왼쪽에서 오른쪽으로, 그리고 위쪽에서 아래쪽으로 배치됩니다.

2. row-reverse : 만약에 direction 속성 값이 ltr(left-to-right)이면, 플렉스 요소는 반대로 오른쪽에서 왼쪽으로 배치됩니다.

3. column : 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 위쪽에서 아래쪽으로 배치됩니다.

4. column-reverse : 만약에 쓰기 방식이 수평이면, 플렉스 요소는 수직 방향으로 아래쪽에서 위쪽으로 배치됩니다.

flex는 주축(Main Axis)과 교차축(Cross Axis) 두 방향이 있습니다. 기본값은 그림과 같습니다.

/* CSS */
.container {
  display: flex;
  /* Default flex-direction */
  flex-direction: row;
}

 

방향이 flex-direction: column인 경우 플렉스 요소가 세로로 표시됩니다.

/* CSS */
.container {
  display: flex;
  flex-direction: column;
}

 

플렉스 요소의 width값을 50%로 수정합니다. 이 경우 컨테이너 요소 행의 공간이 없어도 플렉스 요소가 줄 바꿈 되지 않습니다.

/* CSS */
.item {
  width: 50%;
  height: 100px;
}

 

flex-wrap (item 줄바꿈 설정)

1. nowrap : 기본 설정으로, 플렉스 요소가 다음 줄로 넘어가지 않습니다. 대신에 플렉스 요소의 너비를 줄여서 한 줄에 모두 배치시킵니다.

2. wrap : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다.

3. wrap-reverse : 플렉스 요소가 여유 공간이 없으면 다음 줄로 넘어가서 배치됩니다. 단, 아래쪽이 아닌 위쪽으로 넘어갑니다.

줄바꿈되지 않는 문제를 해결하려면, flex-wrap: wrap 속성을 추가합니다.

/* CSS */
.container {
  display: flex;
  flex-wrap: wrap;
}

 

align-items (수직 방향 정렬)

1. stretch : 기본 설정으로, 플렉스 요소의 높이가 플렉스 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.

2. flex-start : 플렉스 요소는 플렉스 컨테이너의 위쪽에 배치됩니다.

3. flex-end : 플렉스 요소는 플렉스 컨테이너의 아래쪽에 배치됩니다.

4. center : 플렉스 요소는 플렉스 컨테이너의 가운데에 배치됩니다.

5. baseline : 플렉스 요소는 플렉스 컨테이너의 기준선(baseline)에 배치됩니다.

상단 플렉스 요소와 하단 플렉스 요소 사이에 공간이 있는 이유는

기본값이 align-items: stretch 이기 때문에 플렉스 요소가 컨테이너 요소와 높이가 같게 변경됐지만, height: 100px 이 적용되면서 공간이 생기게 됩니다.

height: auto로 수정하면 플렉스 요소의 높이는 컨테이너 요소의 높이와 같아집니다.

/* CSS */
.item {
  width: 50%;
  height: auto;
}

 

align-content (2줄 이상 수직 정렬,  flex-wrap 속성 있을 경우에만 작동)

1. stretch : 기본 설정으로, 플렉스 라인의 높이가 남는 공간을 전부 차지하게 됩니다.

2. flex-start : 플렉스 라인은 플렉스 컨테이너의 앞쪽에 뭉치게 됩니다.

3. flex-end : 플렉스 라인은 플렉스 컨테이너의 뒤쪽에 뭉치게 됩니다.

4. center : 플렉스 라인은 플렉스 컨테이너의 가운데에 뭉치게 됩니다.

5. space-between : 플렉스 라인은 플렉스 컨테이너에 고르게 분포됩니다.

6. space-around : 플렉스 라인은 플렉스 컨테이너에 고르게 분포됩니다. 단, 양쪽 끝에 약간의 공간을 남겨둡니다.

flex-wrap: wrap 속성이 있고, 플렉스 요소가 2줄 이상일 경우 수직 정렬을 설정할 수 있습니다.

/* CSS */
.container {
  display: flex;
  flex-wrap: wrap;
}
 
.item {
  width: 50%;
  height: 100px;
}

2줄 이상의 플렉스 요소를 컨테이너 요소 가운데 정렬시키고 싶을 경우 align-content: center 속성을 추가합니다.

(단, 2줄 이상일 경우 align-content 속성이 우선 적용되기 때문에 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.)

/* CSS */
.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

 

justify-content (수평 방향 정렬)

1. flex-start : 기본 설정으로, 플렉스 요소는 플렉스 컨테이너의 앞쪽에서부터 배치됩니다.

2. flex-end : 플렉스 요소는 플렉스 컨테이너의 뒤쪽에서부터 배치됩니다.

3. center : 플렉스 요소는 플렉스 컨테이너의 가운데에서부터 배치됩니다.

4. space-between : 플렉스 시작 요소는 시작점에, 마지막 요소는 끝점에 정렬되고 나머지 요소는 사이에 고르게 배치됩니다.

5. space-around : 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.

 

/* CSS */
.container {
  display: flex;
  flex-wrap: wrap;
}
 
.item {
  width: 100px;
  height: 100px;
}

플렉스 요소 시작과 마지막을 끝점에 정렬하고 사이 간격을 동일하게 유지하려면 justify-content: space-between 속성을 추가합니다.

/* CSS */
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

 

align-self (수직 방향 정렬)

align-items 보다 우선 적용되며, 플렉스 요소마다 서로 다른 align 속성 값을 설정할 수 있습니다.

/* CSS */
.salmon {
  align-self: flex-start;
}
 
.kebab {
  align-self: flex-end;
}

 

CSS grid

grid 브라우저별 지원 현황 (2020.07.07 기준)

 

1. 기본 구성

grid의 경우 2차원(행과 열) 두 축이 있습니다. flex 보다 좀 더 복잡한 레이아웃을 만들 때 사용할 수 있습니다.

 

<!-- HTML -->
<div class="container">
   <div class="item konafa"></div>
   <div class="item icecream"></div>
   <div class="item donut"></div>
   <div class="item cake"></div>
</div>

/* CSS */
.container {
  display: grid;
}

 

grid-template-columns (열 크기 정의) / grid-template-rows (행 크기 정의)

열과 행의 크기를 지정합니다. 

fr(fractional unit)은 사용 가능한 공간에 대한 비율을 의미합니다.

/* CSS */
.container {
  display: grid;
  grid-template-colums: 1열크기 2크기 ...;
  grid-template-rows: 1행크기 2행크기 ...;
}

/* CSS */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr; 
  grid-template-rows: 1fr 1fr;
}

 

justify-items (수평 방향 정렬)

1. normal : 기본 설정으로, stretch와 같습니다.

2. start : 시작점 기준 왼쪽에 배치됩니다.

3. center : 수평 가운데에 배치됩니다.

4. end : 끝점 기준 오른쪽에 배치됩니다.

5. stretch : 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.

 

justify-items: center 속성을 추가해 그리드 요소를 가운데 배치합니다.

/* CSS */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
}

 

align-items (수직 방향 정렬)

그리드 요소를 세로 및 가로 가운데에 배치하려면 align-items: center 속성을 추가합니다.

/* CSS */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  justify-items: center;
  align-items: center;
}

 

align-self (수직 방향 정렬)

그리드 요소마다 서로 다른 align 속성값을 설정할 수 있습니다.

1. normal : 기본 설정으로, stretch와 같습니다.

2. start : 시작점 기준 위쪽에 배치됩니다.

3. center : 수직 가운데에 배치됩니다.

4. end : 끝점 기준 아래쪽에 배치됩니다.

5. stretch : 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.

 

/* CSS */
.icecream {
  align-self: start;
}

 

justify-self (수평 방향 정렬)

그리드 요소마다 서로 다른 justify 속성값을 설정할 수 있습니다.

/* CSS */
.icecream {
  align-self: start;
  justify-self: end;
}

 

justify-content (콘텐츠 열 사이 수평 방향 정렬)

1. normal : 기본 설정으로, stretch와 같습니다.

2. start : 시작점 기준 왼쪽에 배치됩니다.

3. center : 수평 가운데에 배치됩니다.

4. end : 끝점 기준 오른쪽에 배치됩니다.

5. space-around : 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.

6. space-between : 시작 요소는 시작점에, 마지막 요소는 끝점에 정렬되고 나머지 요소는 사이에 고르게 배치됩니다.

7. space-evenly : 모든 여백이 고르게 배치됩니다.

8. stretch : 컨테이너의 너비와 같게 변경된 뒤 연이어 배치됩니다.

 

/* CSS */
.container {
  display: grid;
  grid-template-columns: 150px 150px;
}

 

고정된 크기의 열이 있는 경우 컨테이너가 열보다 큰 경우 비어있는 공간이 생성됩니다. 이 경우 justify-content 속성으로 열 사이의 간격을 제어하는 데 사용할 수 있습니다.

/* CSS */
.container {
  display: grid;
  grid-template-columns: 150px 150px;
  justify-content: space-between;
}

 

align-content (콘텐츠 행 사이 수직 방향 정렬)

1. normal : 기본 설정으로, stretch와 같습니다.

2. start : 시작점 기준 위쪽에 배치됩니다.

3. center : 수직 가운데에 배치됩니다.

4. end : 끝점 기준 아래쪽에 배치됩니다.

5. space-around : 위, 아래, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치됩니다.

6. space-between : 시작 요소는 시작점에, 마지막 요소는 끝점에 정렬되고 나머지 요소는 사이에 고르게 배치됩니다.

7. space-evenly : 모든 여백이 고르게 배치됩니다.

8. stretch : 컨테이너의 높이와 같게 변경된 뒤 연이어 배치됩니다.

 

/* CSS */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px 150px;
}

 

고정된 크기의 행이 있는  경우 컨테이너 높이가 행보다 큰 경우 비어있는 공간이 생성됩니다. 이 경우 justify-content 속성으로 행 사이의 간격을 제어하는 데 사용할 수 있습니다.

/* CSS */
.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 150px 150px;
  align-content: space-between;
}

 

[ 출처 ]

· Learn Box alignment

· 플렉서블 박스 레이아웃

· CSS Flex(Flexible Box) 완벽 가이드

· CSS Grid 완벽 가이드