1. d-flex의 본질
d-flex는 CSS의display: flex;를 적용하는 Bootstrap 유틸리티 클래스입니다.- 부모 요소를 Flex 컨테이너로 바꾸어, 자식 요소들이 Flex 아이템으로 동작하게 만듭니다.
- Flex 아이템은
축 방향,정렬,간격,순서,크기를 유연하게 조정할 수 있습니다. - 즉,
d-flex는 단순히 가로 배치 도구가 아니라 전체 레이아웃 제어의 출발점입니다.
2. Flex 컨테이너 변형
.d-flex→ 블록 레벨 flex (전체 줄 차지).d-inline-flex→ 인라인 flex (텍스트 줄 안에서 배치)
<span class="d-inline-flex align-items-center gap-2">
<i class="bi bi-check-circle"></i> 승인됨
</span>3. 축 방향 (flex-direction)
.flex-row(기본): 가로 배치.flex-row-reverse: 가로 반전.flex-column: 세로 배치.flex-column-reverse: 세로 반전
<div class="d-flex flex-column">
<div>위</div>
<div>아래</div>
</div>실전 응용: 모바일에서는 세로(flex-column), 데스크톱에서는 가로(flex-row)로 전환
<div class="d-flex flex-column flex-md-row">
<div class="p-2 border">Menu</div>
<div class="p-2 border flex-fill">Content</div>
</div>4. 줄바꿈 (flex-wrap)
.flex-nowrap(기본).flex-wrap: 공간이 부족하면 줄바꿈.flex-wrap-reverse: 줄바꿈 + 위쪽부터 쌓기
<div class="d-flex flex-wrap gap-2">
<div class="p-2 border">Box 1</div>
<div class="p-2 border">Box 2</div>
<div class="p-2 border">Box 3</div>
<div class="p-2 border">Box 4</div>
</div>5. 주축 정렬 (justify-content)
.justify-content-start.justify-content-center.justify-content-end.justify-content-between.justify-content-around.justify-content-evenly
<div class="d-flex justify-content-between border p-2">
<span>왼쪽</span>
<span>오른쪽</span>
</div>실전 응용: 툴바 버튼 간격 자동 배분
<div class="d-flex justify-content-around p-3 bg-light">
<button class="btn btn-primary">Save</button>
<button class="btn btn-secondary">Edit</button>
<button class="btn btn-danger">Delete</button>
</div>6. 교차축 정렬 (align-items, align-content)
.align-items-start | center | end | baseline | stretch.align-content-start | center | end | between | around | stretch(여러 줄일 때)
<div class="d-flex align-items-center border" style="height:100px;">
<div class="bg-primary text-white p-2">짧은 텍스트</div>
<div class="bg-success text-white p-4">높은 박스</div>
</div>위 예시는 align-items-center 덕분에 높이가 달라도 세로 가운데 정렬됩니다.
7. 개별 아이템 정렬 (align-self)
.align-self-start.align-self-center.align-self-end
<div class="d-flex border" style="height:120px;">
<div class="align-self-start bg-primary text-white p-2">위</div>
<div class="align-self-center bg-success text-white p-2">가운데</div>
<div class="align-self-end bg-danger text-white p-2">아래</div>
</div>8. 성장/축소 (flex-grow, flex-shrink, flex-fill)
.flex-grow-1: 남는 공간 차지.flex-grow-0: 공간 차지 안 함.flex-shrink-0: 줄어들지 않음.flex-fill: 남은 공간 균등 분배
<div class="d-flex border">
<div class="flex-fill bg-primary text-white p-2">Fill 1</div>
<div class="flex-fill bg-success text-white p-2">Fill 2</div>
<div class="flex-fill bg-danger text-white p-2">Fill 3</div>
</div>9. 순서 (order)
.order-0~.order-5.order-first.order-last
<div class="d-flex border">
<div class="order-2 p-2 bg-primary text-white">둘째</div>
<div class="order-1 p-2 bg-success text-white">첫째</div>
<div class="order-3 p-2 bg-danger text-white">셋째</div>
</div>10. 간격 (gap)
.gap-0~.gap-5.row-gap-*,.column-gap-*
<div class="d-flex gap-3">
<div class="bg-primary text-white p-2">Item 1</div>
<div class="bg-success text-white p-2">Item 2</div>
<div class="bg-danger text-white p-2">Item 3</div>
</div>11. 자동 마진 (auto margin)
.ms-auto: 왼쪽 마진 자동 → 오른쪽 끝으로 밀기.me-auto: 오른쪽 마진 자동 → 왼쪽 끝으로 밀기
<div class="d-flex border p-2">
<div>왼쪽</div>
<div class="ms-auto">오른쪽 끝</div>
</div>12. 실전 응용
(A) 헤더 레이아웃
<header class="d-flex align-items-center p-3 border-bottom">
<div class="fw-bold fs-4">MyBrand</div>
<nav class="ms-auto d-flex gap-3">
<a href="#">Docs</a>
<a href="#">Blog</a>
<a href="#" class="btn btn-sm btn-primary">Login</a>
</nav>
</header>(B) 중앙 배치
<div class="d-flex justify-content-center align-items-center" style="height:100vh;">
<button class="btn btn-lg btn-success">정중앙 버튼</button>
</div>(C) 카드 그리드
<div class="d-flex flex-wrap gap-3">
<div class="card" style="width: 18rem;">카드 1</div>
<div class="card" style="width: 18rem;">카드 2</div>
<div class="card" style="width: 18rem;">카드 3</div>
</div>(D) 3분할 구조
<div class="d-flex">
<aside class="p-3 bg-light" style="width:200px;">왼쪽</aside>
<main class="flex-fill p-3">메인 콘텐츠</main>
<aside class="p-3 bg-light" style="width:200px;">오른쪽</aside>
</div>13. 결론
d-flex는 Bootstrap 레이아웃의 핵심 기반으로, 모든 Flexbox 기능을 유틸리티화한 클래스입니다.- 방향, 정렬, 간격, 순서, 크기 배분을 모두 커버하며, 반응형 접미사(
-sm,-md,-lg등)로 다양한 디바이스에서 레이아웃 전환 가능. - 실무에서는
d-flex와align-items-*,justify-content-*,flex-fill,gap-*등을 조합하여 헤더, 사이드바, 카드 레이아웃, 버튼 그룹, 중앙 정렬 등 거의 모든 UI 패턴을 쉽게 구현할 수 있습니다.
운도 실력