CSS Flexbox(컨테이너)에 대한 실용적인 치트 시트

원래 이 Flexbox 치트 시트를 올렸는데 반응이 너무 좋아서 여기에도 쓰기로 했어요! (제 생각에는) Flexbox에 대한 가장 일반적인 시나리오를 다룰 것입니다.

치트 시트(위 그림)만 원하시면 you can download it here !

목차

Horizontal Alignment

Anchor group to the center (horizontally)

Anchor group to the right side

Add space around all items

Add space between all items

Vertical Alignment

Anchor group to the center (vertically)

Anchor group to the top

Anchor group to the bottom

Perfect (Vertical and Horizontal) Center Alignment

Content Direction

Reverse the flow of content (horizontally)

Flow content vertically instead of horizontally

Reverse the flow of content (vertically)

Content Wrapping

Wrap content to next lines (flow down)

Wrap content to previous lines (flow up)

Default Behavior

수평 정렬

항목을 그룹으로 또는 개별적으로 수평으로 정렬할 수 있습니다.

중앙에 앵커 그룹(수평)

.container {
  display: flex;
  justify-content: center;
}

앵커 그룹을 오른쪽으로

.container {
  display: flex;
  justify-content: flex-end;
}

모든 항목 주위에 공간 추가

.container {
  display: flex;
  justify-content: space-around;
}

모든 항목 사이에 공백 추가

.container {
  display: flex;
  justify-content: space-between;
}

수직 정렬

항목을 그룹으로 세로로 정렬할 수 있습니다.

중앙에 그룹 고정(수직)

.container {
  display: flex;
  align-items: center;
}

앵커 그룹을 맨 위로

.container {
  display: flex;
  align-items: flex-start;
}

하단에 앵커 그룹

.container {
  display: flex;
  align-items: flex-end;
}

완벽한(수직 및 수평) 중앙 정렬

선택기를 결합하여 원하는 레이아웃을 얻을 수 있습니다. Flexbox를 사용하면 완벽한 센터링이 매우 쉽습니다.

.container {
  display: flex;
  align-items: center;
  justify-content: center;
}

콘텐츠 방향

전체 콘텐츠 흐름(열 또는 행)을 변경할 수 있으며 콘텐츠 배열도 변경할 수 있습니다.

콘텐츠 흐름 반전(수평)

.container {
  display: flex;
  flex-direction: row-reverse;
}

콘텐츠를 가로 대신 세로로 흐르게 함

.container {
  display: flex;
  flex-direction: column;
}

콘텐츠 흐름 반전(수직)

.container {
  display: flex;
  flex-direction: column-reverse;
}

콘텐츠 래핑

기본적으로 모든 항목은 한 줄에 표시됩니다.

.container {
  display: flex;
}

내용을 다음 줄로 줄 바꿈(아래로 흐름)

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

내용을 이전 줄로 줄 바꿈(위로)

.container {
  display: flex;
  flex-wrap: wrap-reverse;
}

기본 동작

Flexbox의 기본 동작은...

컨테이너를 블록으로 처리(전체 너비)

모든 항목을 왼쪽 정렬

컨테이너에 맞게 각 항목의 높이 늘이기

모든 항목을 한 줄에 맞춥니다.

.container {
  display: flex;
}

시간을 내어 확인해 주셔서 감사합니다! 뭔가 빠진 것 같거나 그냥 인사하고 싶다면 아래에 댓글을 남겨주세요! ✌️