목차
flexbox 블럭 vs 인라인 flexbox 수평 정렬 (왼쪽/오른쪽) flexbox 수직 정렬 (기본/역순) flexbox 아이템 끝선 정렬 flexbox 아이템 동일 너비 설정 flexbox 나머지 너비 (차지/제거) flexbox 아이템 순서 조정 flexbox 자동 마진 flexbox 아이템 감싸기 flexbox 아이템 내용 위치/정렬 flexbox 아이템 위치/정렬 flexbox 자체 정렬 flexbox 반응형 ★
BS3: float 요소로 레이아웃 설정. IE8~9 이상 지원.
BS4, BS5: flex 요소로 레이아웃 설정. IE10 이상 지원.
flexbox 블럭 vs 인라인
[블럭 플렉스박스]
<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>
결과보기
[인라인 플렉스박스]
<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>
결과보기
PS.
.d-flex { display: flex!important;}
.d-inline-flex { display: inline-flex!important;}
flexbox 수평 정렬 (왼쪽/오른쪽)
[왼쪽 정렬] (기본값)
<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>
결과보기
PS.
.flex-row { flex-direction: row!important;}
.flex-row-reverse { flex-direction: row-reverse!important;}
flexbox 수직 정렬 (기본/역순)
[기본 정렬]
<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>
결과보기
flexbox 아이템 끝선 정렬
<div class="d-flex justify-content-start "> 컨테이너 기본축 앞단에 아이템 배치. (※ 아이템 순서는 유지.) (기본값) ※ flex-direction 속성값에 reverse 추가된 경우, 역으로 끝단을 기산.</div>
<div class="d-flex justify-content-end ">컨테이너 기본축 끝단에 아이템 배치. (※ 아이템 순서는 유지.) ※ flex-direction 속성값에 reverse 추가된 경우, 역으로 앞단을 기산.</div>
<div class="d-flex justify-content-center "> 컨테이너 기본축 중단에 아이템 배치. (※ 아이템 순서는 유지) ※ 중앙에 안 오면, 부모 요소를 100% 설정 후 부모 요소나 해당 요소의 padding 값 수정.</div>
<div class="d-flex justify-content-between "> 컨테이너 기본축 기준 + 아이템 사이에만 공백 추가 + 아이템 양쪽 끝은 컨테이너에 붙임.</div>
<div class="d-flex justify-content-around "> 컨테이너 기본축 기준 + 아이템 둘레에 공백 추가 + 아이템 사이 공백 너비가 아이템 끝 공백 너비의 2배.</div>
<div class="d-flex justify-content-evenly ">컨테이너 기본축 기준 + 아이템 사이에 공백 추가 + 아이템 사이든 끝이든 동일 너비의 공백. IE 지원 X</div>
PS.
.justify-content-start { justify-content: flex-start !important;}
.justify-content-end { justify-content: flex-end !important;}
.justify-content-center { justify-content: center !important;}
.justify-content-between { justify-content: space-between !important;}
.justify-content-around { justify-content: space-around !important;}
.justify-content-evenly { justify-content: space-evenly !important;}
flexbox 아이템 동일 너비 설정
<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>
결과보기
PS.
.flex-fill { flex: 1 1 auto !important;}
flexbox 나머지 너비 (차지/제거)
[나머지 너비 차지]
<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>
결과보기
[나머지 너비 제거]
<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-shrink-1 ">Flex item 3</div>
</div>
PS.
.flex-grow-0 { flex-grow: 0 !important;}
.flex-grow-1 { flex-grow: 1 !important;}
flexbox 아이템 순서 조정
<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>
결과보기
PS.
.order-first { order: -1 !important;}
.order-0 { order: 0 !important;}
.order-1 { order: 1 !important;}
.order-2 { order: 2 !important;}
.order-3 { order: 3 !important;}
.order-4 { order: 4 !important;}
.order-5 { order: 5 !important;}
.order-last { order: 6 !important;}
flexbox 자동 마진
[왼쪽 자동마진] - 왼쪽에 마진 넣어 아이템을 오른쪽으로 밀기.
<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>
결과보기
PS.
.ms-auto { margin-left: auto !important;}
.me-auto { margin-right: auto !important;}
flexbox 아이템 감싸기
<div class="d-flex flex-wrap "> 줄바꿈 후, 기본 감싸기 </div>
<div class="d-flex flex-wrap-reverse "> 줄바꿈 후, 역순 감싸기 </div>
<div class="d-flex flex-nowrap "> 줄바꿈 안 한 후, 기본 감싸기</div>
결과보기
PS.
.flex-wrap { flex-wrap: wrap !important;}
.flex-nowrap { flex-wrap: nowrap !important;}
.flex-wrap-reverse { flex-wrap: wrap-reverse !important;}
flexbox 아이템 내용 위치/정렬
<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>
결과보기
PS.
.align-content-start { align-content: flex-start !important;}
.align-content-end { align-content: flex-end !important;}
.align-content-center { align-content: center !important;}
.align-content-between { align-content: space-between !important;}
.align-content-around { align-content: space-around !important;}
.align-content-stretch { align-content: stretch !important;}
PS. 위 클래스는 단일 행의 flex 항목에는 영향 안 미침.
flexbox 아이템 위치/정렬
<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>
PS.
.align-items-start { align-items : flex-start !important;}
.align-items-end { align-items: flex-end !important;}
.align-items-center { align-items: center !important;}
.align-items-baseline { align-items: baseline !important;}
.align-items-stretch { align-items: stretch !important;}
PS. 이 클래스는 단일 행의 flex 항목에도 영향 미침.
flexbox 자체 정렬
<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-start ">Flex item 2</div>
<div class="p-2 border align-self-end ">Flex item 2</div>
<div class="p-2 border align-self-center ">Flex item 2</div>
<div class="p-2 border align-self-baseline ">Flex item 2</div>
<div class="p-2 border align-self-stretch ">Flex item 2 (기본값)</div>
<div class="p-2 border">Flex item 3</div>
</div>
결과보기
PS.
.align-self-start { align-self: flex-start!important;}
.align-self-end { align-self: flex-end!important;}
.align-self-center { align-self: center!important;}
.align-self-baseline { align-self: baseline!important;}
.align-self-stretch { align-self: stretch!important;}
flexbox 반응형 ★
* (기호) : 분기점 (breakpoint) 표시 문구 들어갈 자리.sm , md , lg , xl, xxl
[플렉스 컨테이너]
.d-*-flex : 블럭형 flexbox 컨테이너.
.d-*-inline-flex : 인라인형 flexbox 컨테이너.
결과보기
[아이템 방향]
.flex-*-row : 아이템을 가로로 왼쪽부터 순서대로 정렬.
.flex-*-row-reverse : 아이템을 가로로 우측부터 정렬.
.flex-*-column : 아이템을 세로로 순서대로 정렬
.flex-*-column-reverse 다른 화면에서 플렉스 항목을 역순으로 세로로 표시
결과보기
[내용 끝선 정렬]
.justify-content-*-start : 플렉스 시작에 아이템 정렬. (왼쪽 정렬).
.justify-content-*-end : 플렉스 끝에 아이템 정렬. (오른쪽 정렬).
.justify-content-*-center : 플렉스 컨테이너 중앙에 플렉스 아이템 정렬
.justify-content-*-between : 플렉스 아이템 "사이에" 공백 넣어 끝선 정렬.
.justify-content-*-around : 플렉스 아이템 "주변"에 공백 넣어 정렬.
.justify-content-*-evenly : 플렉스 아이템과 양쪽 공백 균등하게 넣어 정렬.
결과보기
[너비 채우기 / 동일 너비]
.flex-*-fill : 플렉스 아이템 동일 너비강제 적용.
결과보기
[너비 늘리기]
.flex-*-grow-0 : 아이템 차지 너비 안 늘리기
.flex-*-grow-1 : 아이템 차지 너비 늘리기
결과보기
[너비 줄이기]
.flex-*-shrink-0 : 아이템 차지 너비 줄이지 않기.
.flex-*-shrink-1 : 아이템 차지 너비 줄이기
결과보기
[아이템 순서 조정]
.order-*-first : 맨 처음
.order-*-0 : 순서 조정. (0 ~ 5 가능)
~
.order-*-5
.order-*-last : 맨 마지막
결과보기
[아이템 감싸기]
.flex-*-nowrap : 감싸지 않음. (한줄로 표시됨)
.flex-*-wrap : 아이템을 감싸기
.flex-*-wrap-reverse : 아이템을 감싼 후 역순 정렬.
결과보기
[내용 정렬]
.align-content-*-start : 처음부터 아이템 정렬.
.align-content-*-end : 끝에서부터 아이템 정렬.
.align-content-*-center : 중앙에 아이템 정렬
.align-content-*-around : 아이템 상하 사이에 "여백" 주기
.align-content-*-stretch : 아이템 늘이기
결과보기
[아이템 정렬]
.align-items-*-start : 처음부터 한 줄의 항목을 정렬.
.align-items-*-end : 끝에 한 행의 항목을 정렬.
.align-items-*-center : 중앙에 단일 행의 항목을 정렬.
.align-items-*-baseline : 기준선에서 한 행의 항목을 다른 화면에서 정렬.
.align-items-*-stretch : 한 줄의 항목을 늘이기
결과보기
[자제 정렬]
.align-self-*-start : 다른 화면에서 시작부터 플렉스 항목 정렬
.align-self-*-end : 다른 화면에서 끝에 플렉스 항목 정렬
.align-self-*-center : 다른 화면에서 가운데에 플렉스 항목 정렬
.align-self-*-baseline : 기준선의 플렉스 항목을 다른 화면에서 정렬
.align-self-*-stretch : 다른 화면에서 플렉스 항목을 늘임.
결과보기
