본문으로 건너뛰기
실습하기

플렉스박스로 레이아웃 구성하기

Flexbox는 Row(행, 가로줄) 또는 Column(열, 세로줄) 중 한 방향으로 컨테이너 내 아이템들을 정렬합니다.

Flexbox 레이아웃은 여러 개의 책들이 일렬로 배열된 책장과 비슷합니다.

여기서 책장은 Flex Container, 책장 내부의 책은 Flex Item이라고 생각하면 됩니다.

HTML
<div class="flex-container">
  <div class="flex-item">Book 1</div>
  <div class="flex-item">Book 2</div>
  <div class="flex-item">Book 3</div>
</div>

flexbox 정렬 및 간격 조절​

Flexbox에서 justify-content는 주축(main axis)을 기준으로, align-items는 교차축(cross axis)을 기준으로 아이템들을 정렬합니다.

여기서 주축과 교차축은 flex-direction 속성에 따라 달라집니다.

  • 주축: flex-direction이 row이면 가로 방향, column이면 세로 방향

  • 교차축: flex-direction이 row이면 세로 방향, column이면 가로 방향


gap 속성은 flexbox container 내 flex item 사이의 간격을 조절합니다.


justify-content​

플렉스 컨테이너 내의 아이템들을 주축(main axis)을 기준으로 어떻게 정렬할지 결정합니다.

주축은 flex-direction이 row이면 주축은 가로 방향이고, column이면 주축은 세로 방향입니다.

할당 가능한 값:​

  • flex-start: 아이템들을 시작 지점에 정렬합니다. 주축이 가로 방향이면 왼쪽, 세로 방향이면 위쪽에 정렬합니다.

  • flex-end: 아이템들을 끝 지점에 정렬합니다. 주축이 가로 방향이면 오른쪽, 세로 방향이면 아래쪽에 정렬합니다.

  • center: 아이템들을 가운데에 정렬합니다. 주축이 가로 방향이면 수평 가운데, 세로 방향이면 수직 가운데에 정렬합니다.

  • space-between: 아이템들 사이에 동일한 공간을 만듭니다. 시작과 끝 지점에는 공간이 없습니다.

  • space-around: 각 아이템 주변에 동일한 공간을 만듭니다. 시작과 끝 지점에 아이템 사이의 공간의 절반만큼의 공간이 있습니다.

  • space-evenly: 아이템들 사이와 시작/끝 지점에 동일한 공간을 만듭니다.


align-items:​

플렉스 컨테이너 내의 아이템들을 교차축(cross axis)을 기준으로 어떻게 정렬할지 결정합니다.

flex-direction이 row이면 교차축은 세로 방향이고, column이면 교차축은 가로 방향입니다.

할당 가능한 값:​

  • flex-start: 아이템들을 교차축의 시작 지점에 정렬합니다. 주축이 가로 방향이면 위쪽, 세로 방향이면 왼쪽에 정렬합니다.

  • flex-end: 아이템들을 교차축의 끝 지점에 정렬합니다. 주축이 가로 방향이면 아래쪽, 세로 방향이면 오른쪽에 정렬합니다.

  • center: 아이템들을 교차축의 가운데에 정렬합니다. 주축이 가로 방향이면 수직 가운데, 세로 방향이면 수평 가운데에 정렬합니다.

  • stretch: 아이템들을 교차축을 따라 늘려 컨테이너의 전체 높이 혹은 너비를 차지하게 합니다.

  • baseline: 컨테이너 안의 flex 아이템들을 그들의 기준선(baseline)에 따라 정렬합니다. baseline은 텍스트의 기준선을 말하며, 대부분의 경우 글자의 하단을 의미합니다.


코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!