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

Flex 레이아웃 2

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: 아이템들 사이와 시작/끝 지점에 동일한 공간을 만듭니다.


`

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

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


속성에 적용 가능한 값​

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

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

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

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

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

다음 내용이 궁금하다면?

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