[웹 디자인] 13일차: 플렉스박스(Flexbox)

플렉스박스(Flexbox)란?

플렉스박스(Flexbox)는 1차원 레이아웃 모델로, 복잡한 레이아웃을 쉽게 만들 수 있도록 도와줍니다. Flexbox를 사용하면 컨테이너 내부의 아이템들을 수평 또는 수직 방향으로 배치하고 정렬할 수 있습니다. 플렉스 컨테이너와 플렉스 아이템이라는 두 가지 주요 개념으로 구성됩니다.

플렉스 컨테이너 설정

• display: flex: 요소를 플렉스 컨테이너로 설정합니다.
• display: inline-flex: 인라인 플렉스 컨테이너로 설정합니다.

예제:

.container {
  display: flex;
}

<div class="container">
  <div class="item">아이템 1</div>
  <div class="item">아이템 2</div>
  <div class="item">아이템 3</div>
</div>

플렉스 컨테이너 속성

flex-direction

플렉스 아이템의 주축 방향을 설정합니다.

• row: 가로 방향 (기본값)
• row-reverse: 가로 방향 반대
• column: 세로 방향
• column-reverse: 세로 방향 반대

예제:

.container {
  display: flex;
  flex-direction: row; /* 또는 column, row-reverse, column-reverse */
}

justify-content

주축을 따라 아이템을 정렬합니다.

• flex-start: 주축의 시작 부분에 정렬 (기본값)
• flex-end: 주축의 끝 부분에 정렬
• center: 주축의 중앙에 정렬
• space-between: 아이템 사이에 동일한 간격을 배치
• space-around: 아이템 주위에 동일한 간격을 배치

예제:

.container {
  display: flex;
  justify-content: center; /* 또는 flex-start, flex-end, space-between, space-around */
}

align-items

교차축을 따라 아이템을 정렬합니다.

• flex-start: 교차축의 시작 부분에 정렬
• flex-end: 교차축의 끝 부분에 정렬
• center: 교차축의 중앙에 정렬
• baseline: 아이템의 기준선에 정렬
• stretch: 아이템을 컨테이너의 높이에 맞게 늘림 (기본값)

예제:

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

flex-wrap

플렉스 아이템을 여러 줄로 나눕니다.

• nowrap: 단일 행에 모든 아이템을 배치 (기본값)
• wrap: 여러 행에 아이템을 배치
• wrap-reverse: 반대 방향으로 여러 행에 아이템을 배치

예제:

.container {
  display: flex;
  flex-wrap: wrap; /* 또는 nowrap, wrap-reverse */
}

align-content

여러 행을 교차축을 따라 정렬합니다. (flex-wrap이 wrap일 때 적용)

• flex-start: 교차축의 시작 부분에 정렬
• flex-end: 교차축의 끝 부분에 정렬
• center: 교차축의 중앙에 정렬
• space-between: 행 사이에 동일한 간격을 배치
• space-around: 행 주위에 동일한 간격을 배치
• stretch: 행을 컨테이너의 높이에 맞게 늘림

예제:

.container {
  display: flex;
  flex-wrap: wrap;
  align-content: center; /* 또는 flex-start, flex-end, space-between, space-around, stretch */
}

플렉스 아이템 속성

flex

아이템의 크기와 공간 배분을 설정합니다. flex-grow, flex-shrink, flex-basis의 단축 속성입니다.

예제:

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}

order

플렉스 아이템의 순서를 설정합니다. 기본값은 0입니다.

예제:

.item {
  order: 1; /* 또는 다른 숫자 값 */
}

flex-grow

남은 공간을 차지할 비율을 설정합니다. 기본값은 0입니다.

예제:

.item {
  flex-grow: 2; /* 또는 다른 숫자 값 */
}

flex-shrink

아이템이 축소될 비율을 설정합니다. 기본값은 1입니다.

예제:

.item {
  flex-shrink: 1; /* 또는 다른 숫자 값 */
}

flex-basis

아이템의 기본 크기를 설정합니다. auto 또는 특정 크기를 지정할 수 있습니다.

예제:

.item {
  flex-basis: 200px; /* 또는 다른 크기 값 */
}

align-self

개별 아이템의 정렬을 설정합니다. align-items 속성을 재정의합니다.

• auto: 부모 컨테이너의 align-items 속성 상속
• flex-start: 교차축의 시작 부분에 정렬
• flex-end: 교차축의 끝 부분에 정렬
• center: 교차축의 중앙에 정렬
• baseline: 아이템의 기준선에 정렬
• stretch: 아이템을 컨테이너의 높이에 맞게 늘림

예제:

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

결론

플렉스박스(Flexbox)는 1차원 레이아웃 모델로, 복잡한 레이아웃을 쉽게 구현할 수 있게 해줍니다. 플렉스 컨테이너와 플렉스 아이템을 사용하여 요소들을 효과적으로 배치하고 정렬할 수 있습니다. 이번 글에서는 플렉스박스의 기본 개념과 다양한 속성에 대해 배웠습니다.

다음 글에서는 그리드 레이아웃(Grid Layout)에 대해 알아보겠습니다.

다음 글에서 만나요!