[Bootstrap] Flex

기타/Bootstrap

[Bootstrap] Flex

glorypang 2025. 3. 25. 23:55

728x90

SMALL

1. Flex 컨테이너 만들기

Bootstrap 5는 float 대신 Flexbox 기반 레이아웃을 사용
`.d-flex`: 블록형 Flex 컨테이너

<div class="d-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

`.d-inline-flex`: 인라인형 Flex 컨테이너

<div class="d-inline-flex p-3 bg-secondary text-white">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

2. 방향 설정

방향	클래스
가로 (기본)	`.flex-row`
가로 반대	`.flex-row-reverse`
세로	`.flex-column`
세로 반대	`.flex-column-reverse`

<div class="d-flex flex-row bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-column">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex flex-column-reverse">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

**3. 정렬 - 주축 기준 (`justify-content-*`)**

클래스	설명
`.justify-content-start`	좌측 정렬 (기본)
`.justify-content-end`	우측 정렬
`.justify-content-center`	가운데 정렬
`.justify-content-between`	양 끝 + 사이 여백
`.justify-content-around`	양 옆 동일 여백

<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

4. 너비/공간 분배

4.1 같은 너비로 채우기

`.flex-fill`: 모든 항목을 같은 너비로

<div class="d-flex">
  <div class="p-2 bg-info flex-fill">Flex item 1</div>
  <div class="p-2 bg-warning flex-fill">Flex item 2</div>
  <div class="p-2 bg-primary flex-fill">Flex item 3</div>
</div>

4.2 다른 너비로 채우기

`.flex-grow-1`: 남는 공간 모두 차지
`.flex-shrink-1`: 공간 부족 시 줄어듬

<div class="d-flex">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary flex-grow-1">Flex item 3</div>
</div>

4.3 순서 변경

`.order-0 ~ .order-5`: 시각적 순서 변경

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info order-3">Flex item 1</div>
  <div class="p-2 bg-warning order-2">Flex item 2</div>
  <div class="p-2 bg-primary order-1">Flex item 3</div>
</div>

4.4 자동 여백

`.ms-auto`, `.me-auto`: 마진을 이용한 정렬 (start / end)

<div class="d-flex bg-secondary">
  <div class="p-2 ms-auto bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

<div class="d-flex bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 me-auto bg-primary">Flex item 3</div>
</div>

5. 줄 바꿈

클래스	설명
`.flex-nowrap`	줄 바꿈 없음 (기본)
`.flex-wrap`	자동 줄 바꿈
`.flex-wrap-reverse`	줄 바꿈 + 역방향

<div class="d-flex flex-wrap">..</div>

<div class="d-flex flex-wrap-reverse">..</div>

<div class="d-flex flex-nowrap">..</div>

**6. 수직 정렬 - 한 줄일 때 (`align-items-*`)**

클래스	설명
`.align-items-start`	위 정렬
`.align-items-end`	아래 정렬
`.align-items-center`	세로 가운데 정렬
`.align-items-baseline`	텍스트 기준선 정렬
`.align-items-stretch`	높이 자동 확장 (기본)

<div class="d-flex align-items-start">..</div>

<div class="d-flex align-items-end">..</div>

<div class="d-flex align-items-center">..</div>

<div class="d-flex align-items-baseline">..</div>

<div class="d-flex align-items-stretch">..</div>

**7. 수직 정렬 - 여러 줄일 때 (`align-content-*`)**

`.flex-wrap`이 있어야 작동
start, end, center, between, around, stretch 등 사용 가능

<div class="d-flex flex-wrap align-content-start">..</div>

<div class="d-flex flex-wrap align-content-end">..</div>

<div class="d-flex flex-wrap align-content-center">..</div>

<div class="d-flex flex-wrap align-content-around">..</div>

<div class="d-flex flex-wrap align-content-stretch">..</div>

**8. 개별 항목 정렬 (`align-self-*`)**

각 flex 항목마다 개별 정렬 설정 가능
start / end / center / stretch / baseline 등

<div class="d-flex bg-light" style="height:150px">
  <div class="p-2 border">Flex item 1</div>
  <div class="p-2 border align-self-center ">Flex item 2</div>
  <div class="p-2 border">Flex item 3</div>
</div>

9. 반응형 Flex 클래스

모든 Flex 클래스는 `sm`, `md`, `lg`, `xl`, `xxl`로 확장 가능
`*`은 sm, md, lg, xl 또는 xxl로 대체될 수 있으며, 소형, 중형, 대형, 초대형, 초대형 화면을 나타냄

<div class="d-md-flex justify-content-md-between">...</div>
<div class="flex-lg-column">...</div>

기능	예시 클래스
방향 설정	`.flex--row`, `.flex--column`
정렬	`.justify-content-*-center`
줄바꿈	`.flex-*-wrap`
순서	`.order--1, .order--2`
너비	`.flex-*-fill`

728x90

LIST