Smilehugo
Home
 > 
Programming
CSS Flex 사용 방법

CSS Flex 사용 방법

2023-04-05

CSS3의 Flex를 사용하면 레이아웃을 쉽게 구성할 수 있습니다. 그래서 이번 시간에는 Flex를 사용하는 방법에 대해서 알아보겠습니다.

Flex 기본 개념

Flex는 부모 노드에 해당하는 한개의 Container와 자식 노드에 해당하는 한개 이상의 Item들로 구성됩니다.

Flex의 속성

Flex는 다음과 같은 속성들을 가지고 있습니다.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

display: flex

display 속성은 Flex Container를 만들 때 사용합니다. display 속성에 flex를 지정하면 Flex Container가 됩니다.

.container {
  display: flex;
}

flex-direction

flex-direction 속성은 하나 이상의 item들이 정렬될 방향을 지정합니다. flex-direction 속성에는 row, row-reverse, column, column-reverse가 있으며 기본값은 row입니다.

  • row: Item들을 가로로 배치합니다.
  • row-reverse: Item들을 가로 그리고 역순으로 정렬합니다.
  • column: Item들을 세로로 배치합니다.
  • column-reverse: Item들을 세로로 배치하고, Flex Item의 순서를 반대로 배치합니다.
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

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

flex-wrap

flex-wrap 속성은 모든 item이 한 줄에 나열할 수 없을때 자동으로 줄바꿈해서 나열할 수 있도록 지정합니다. flex-wrap 속성에는 nowrap, wrap, wrap-reverse가 있습니다.

  • nowrap: Flex Item을 한 줄에 배치합니다.
  • wrap: Flex Item을 여러 줄에 걸쳐 배치합니다.
  • wrap-reverse: Flex Item을 여러 줄에 걸쳐 배치하고, Flex Item의 순서를 반대로 배치합니다.
.container {
  display: flex;
  flex-wrap: nowrap;
}

flex-flow

flex-flow 속성은 flex-direction과 flex-wrap을 한 번에 지정할 때 사용합니다.

.container {
  display: flex;
  flex-flow: row nowrap;
}

justify-content

justify-content 속성은 Flex Item을 가로 방향으로 어떻게 배치할지를 지정합니다. justify-content 속성에는 flex-start, flex-end, center, space-between, space-around가 있습니다.

  • flex-start: Flex Item을 가로 방향으로 왼쪽에 배치합니다.
  • flex-end: Flex Item을 가로 방향으로 오른쪽에 배치합니다.
  • center: Flex Item을 가로 방향으로 가운데에 배치합니다.
  • space-between: Flex Item을 가로 방향으로 균등하게 배치합니다.
  • space-around: Flex Item을 가로 방향으로 균등하게 배치하고, Flex Item의 양쪽에 여백을 추가합니다.
.container {
  display: flex;
  justify-content: flex-start;
}

align-items

align-items 속성은 Flex Item을 세로 방향으로 어떻게 배치할지를 지정합니다. align-items 속성에는 flex-start, flex-end, center, baseline, stretch가 있습니다.

  • flex-start: Flex Item을 세로 방향으로 위쪽에 배치합니다.
  • flex-end: Flex Item을 세로 방향으로 아래쪽에 배치합니다.
  • center: Flex Item을 세로 방향으로 가운데에 배치합니다.
  • baseline: Flex Item을 세로 방향으로 baseline에 배치합니다.
  • stretch: Flex Item을 세로 방향으로 꽉 채워서 배치합니다.
.container {
  display: flex;
  align-items: flex-start;
}

align-content

align-content 속성은 Flex Item이 여러 줄에 걸쳐 배치될 때, Flex Item을 세로 방향으로 어떻게 배치할지를 지정합니다. align-content 속성에는 flex-start, flex-end, center, space-between, space-around, stretch가 있습니다.

  • flex-start: Flex Item을 세로 방향으로 위쪽에 배치합니다.
  • flex-end: Flex Item을 세로 방향으로 아래쪽에 배치합니다.
  • center: Flex Item을 세로 방향으로 가운데에 배치합니다.
  • space-between: Flex Item을 세로 방향으로 균등하게 배치합니다.
  • space-around: Flex Item을 세로 방향으로 균등하게 배치하고, Flex Item의 양쪽에 여백을 추가합니다.
  • stretch: Flex Item을 세로 방향으로 꽉 채워서 배치합니다.
.container {
  display: flex;
  align-content: flex-start;
}

Flex의 속성을 사용한 예제

Flex의 속성을 사용하여 다음과 같은 레이아웃을 만들 수 있습니다.

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
}

이렇게 Flex를 사용하는 방법에 대해서 알아봤습니다.

감사합니다. :)

< 목록으로 돌아가기