필요할 때 꺼내 먹는 CSS Flex 정리본

웹 디자인에서 레이아웃은 중요한 요소 중 하나입니다. 그 중에서도 CSS Flex는 웹 페이지의 레이아웃을 유연하게 만드는 데 큰 역할을 합니다. 이 포스트에서는 CSS Flex에 대해 알아보겠습니다.

CSS Flex란?

Flex는 Flexible Box 또는 Flexbox라고도 합니다. Flex는 레이아웃을 위해 탄생했습니다. 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. 이를 사용하면 float나 inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능들을 사용할 수 있습니다.

CSS Flex는 크게 두 가지 부분으로 나눌 수 있습니다

Flex Container는 Flex Item들을 포함하는 부모 요소를 의미합니다.

Flex Item은 Flex Container 내부의 자식 요소들을 의미합니다.

Flex 컨테이너에 적용하는 속성들

display: flex;

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

display: flex;를 컨테이너에 적용하면, 그 컨테이너의 자식 요소들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width 만큼만 차지하게 됩니다.
display: inline-flex;는 display: flex;와 비슷하지만, 컨테이너가 주변 요소들과 어떻게 어우러질지 결정하는 값입니다.

flex-direction

.container {
  flex-direction: row;
  /* flex-direction: column; */
  /* flex-direction: row-reverse; */
  /* flex-direction: column-reverse; */
}

flex-direction 속성은 아이템들이 배치되는 축의 방향을 결정합니다.
row는 아이템들이 행(가로) 방향으로 배치되고,
column은 아이템들이 열(세로) 방향으로 배치됩니다.
row-reverse와 column-reverse는 각각 아이템들이 역순으로 가로 배치되고, 역순으로 세로 배치됩니다.

flex-wrap

.container {
  flex-wrap: nowrap;
  /* flex-wrap: wrap; */
  /* flex-wrap: wrap-reverse; */
}

flex-wrap 속성은 컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정합니다.
nowrap는 줄바꿈을 하지 않습니다.
wrap은 줄바꿈을 합니다.
wrap-reverse는 줄바꿈을 하는데, 아이템을 역순으로 배치합니다.

justify-content

.container {
  justify-content: flex-start;
  /* justify-content: flex-end; */
  /* justify-content: center; */
  /* justify-content: space-between; */
  /* justify-content: space-around; */
  /* justify-content: space-evenly; */
}

justify-content 속성은 메인축 방향으로 아이템들을 어떻게 정렬할지 결정합니다.
flex-start는 아이템들을 시작점에 정렬합니다.
flex-end는 아이템들을 끝점에 정렬합니다.
center는 아이템들을 가운데에 정렬합니다.
space-between은 아이템들 사이에 동일한 간격을 만듭니다.
space-around는 아이템들 주위에 동일한 간격을 만듭니다.
space-evenly는 아이템들 사이와 양 끝에 동일한 간격을 만듭니다.

align-items

.container {
  align-items: stretch;
  /* align-items: flex-start; */
  /* align-items: flex-end; */
  /* align-items: center; */
  /* align-items: baseline; */
}

align-items 속성은 교차축 방향으로 아이템들을 어떻게 정렬할지 결정합니다.
stretch는 아이템들을 컨테이너의 높이에 맞게 늘립니다.
flex-start는 아이템들을 시작점에 정렬합니다.
flex-end는 아이템들을 끝점에 정렬합니다.
center는 아이템들을 가운데에 정렬합니다.
baseline은 아이템들을 텍스트 기준선에 맞춰 정렬합니다.

align-content

.container {
  align-content: stretch;
  /* align-content: flex-start; */
  /* align-content: flex-end; */
  /* align-content: center; */
  /* align-content: space-between; */
  /* align-content: space-around; */
  /* align-content: space-evenly; */
}

align-content 속성은 여러 줄의 아이템들을 교차축 방향으로 어떻게 정렬할지 결정합니다. stretch, flex-start, flex-end, center, space-between, space-around, space-evenly의 값은 justify-content와 동일한 방식으로 작동합니다. 이 속성은 한 줄만 있는 경우에는 적용되지 않습니다.

Flex 아이템에 적용하는 속성들

flex-grow

.item {
  flex-grow: 0;
  /* flex-grow: 1; */
  /* flex-grow: 2; */
  /* ... */
}

flex-grow 속성은 아이템이 컨테이너의 여유 공간을 얼마나 차지할지 결정합니다. 값이 클수록 더 많은 여유 공간을 차지합니다.

flex-shrink

.item {
  flex-shrink: 1;
  /* flex-shrink: 0; */
  /* flex-shrink: 2; */
  /* ... */
}

flex-shrink 속성은 아이템이 컨테이너의 공간이 부족할 때 얼마나 줄어들지 결정합니다. 값이 클수록 더 많이 줄어듭니다.

flex-basis

.item {
  flex-basis: auto;
  /* flex-basis: 0; */
  /* flex-basis: 100px; */
  /* flex-basis: 20%; */
  /* ... */
}

flex-basis 속성은 아이템의 기본 크기를 결정합니다.

auto는 아이템의 원래 크기를 기준으로 합니다. 단위를 지정하여 특정 크기를 지정할 수도 있습니다.

align-self

.item {
  align-self: auto;
  /* align-self: stretch; */
  /* align-self: flex-start; */
  /* align-self: flex-end; */
  /* align-self: center; */
  /* align-self: baseline; */
}

align-self 속성은 아이템이 자신만의 교차축 정렬 방식을 가질 수 있게 합니다.

이 속성은 align-items와 동일한 값을 가질 수 있지만, 각 아이템에 개별적으로 적용됩니다.

order

.item {
  order: 0;
  /* order: 1; */
  /* order: -1; */
  /* ... */
}

order 속성은 아이템의 배치 순서를 결정합니다.

작은 숫자가 먼저 배치되며, 같은 숫자를 가진 아이템은 소스 코드의 순서대로 배치됩니다. 기본값은 0입니다.

z-index

.item:nth-child(2) {
    z-index: 1;
    transform: scale(2);
}

z-index로 Z축의 순서를 정합니다.