목차
flexbox 블럭 vs 인라인 flexbox 수평 정렬 (왼쪽/오른쪽) flexbox 수직 정렬 (기본/역순) flexbox 아이템 끝선 정렬 flexbox 아이템 동일 너비 설정 flexbox 나머지 너비 (차지/제거) flexbox 아이템 순서 조정 flexbox 자동 마진 flexbox 아이템 감싸기 flexbox 아이템 내용 위치/정렬 flexbox 아이템 위치/정렬 flexbox 자체 정렬 flexbox 반응형 ★
BS3: float 요소로 레이아웃 설정. IE8~9 이상 지원.
BS4: 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>
결과보기
.d-flex {
display: -ms-flexbox!important;
display: flex!important;
}
.d-inline-flex {
display: -ms-inline-flexbox!important;
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>
결과보기
.flex-row {
-ms-flex-direction: row!important;
flex-direction: row!important;
}
.flex-row-reverse {
-ms-flex-direction: row-reverse!important;
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 "> 아이템 왼쪽 정렬 </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>
.justify-content-start {
-ms-flex-pack: start!important;
justify-content: flex-start!important;
}
.justify-content-end {
-ms-flex-pack: end!important;
justify-content: flex-end!important;
}
.justify-content-center {
-ms-flex-pack: center!important;
justify-content: center!important;
}
.justify-content-between {
-ms-flex-pack: justify!important;
justify-content: space-between!important;
}
.justify-content-around {
-ms-flex-pack: distribute!important;
justify-content: space-around!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>
결과보기
.flex-fill {
-ms-flex: 1 1 auto!important;
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>
.flex-grow-1 {
-ms-flex-positive: 1!important;
flex-grow: 1!important;
}
.flex-shrink-1 {
-ms-flex-negative: 1!important;
flex-shrink: 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>
결과보기
.order-1 {
-ms-flex-order: 1;
order: 1;
}
.order-2 {
-ms-flex-order: 2;
order: 2;
}
.... 자동 증가
flexbox 자동 마진
[오른쪽 자동마진] - 아이템 오른쪽에 여백 넣기. (나머지 요소가 끝으로 감.)
<div class="d-flex bg-secondary">
<div class="p-2 mr-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 ml-auto bg-primary">Flex item 3</div>
</div>
결과보기
.mr-auto, .mx-auto {
margin-right: auto!important;
}
.ml-auto, .mx-auto {
margin-left: 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>
결과보기
.flex-wrap {
-ms-flex-wrap: wrap!important;
flex-wrap: wrap!important;
}
.flex-wrap-reverse {
-ms-flex-wrap: wrap-reverse!important;
flex-wrap: wrap-reverse!important;
}
.flex-nowrap {
-ms-flex-wrap: nowrap!important;
flex-wrap: nowrap!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. 위 클래스는 단일 행의 flex 항목에는 영향 안 미침.
.align-content-start {
-ms-flex-line-pack: start!important;
align-content: flex-start!important;
}
.align-content-end {
-ms-flex-line-pack: end!important;
align-content: flex-end!important;
}
.align-content-center {
-ms-flex-line-pack: center!important;
align-content: center!important;
}
.align-content-around {
-ms-flex-line-pack: distribute!important;
align-content: space-around!important;
}
.align-content-stretch {
-ms-flex-line-pack: stretch!important;
align-content: stretch!important;
}
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. 이 클래스는 단일 행의 flex 항목에도 영향 미침.
.align-items-start {
-ms-flex-align: start!important;
align-items: flex-start!important;
}
.align-items-end {
-ms-flex-align: end!important;
align-items: flex-end!important;
}
.align-items-center {
-ms-flex-align: center!important;
align-items: center!important;
}
.align-items-baseline {
-ms-flex-align: baseline!important;
align-items: baseline!important;
}
.align-items-stretch {
-ms-flex-align: stretch!important;
align-items: stretch!important;
}
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>
결과보기
.align-self-start {
-ms-flex-item-align: start!important;
align-self: flex-start!important;
}
.align-self-end {
-ms-flex-item-align: end!important;
align-self: flex-end!important;
}
.align-self-center {
-ms-flex-item-align: center!important;
align-self: center!important;
}
.align-self-baseline {
-ms-flex-item-align: baseline!important;
align-self: baseline!important;
}
.align-self-stretch {
-ms-flex-item-align: stretch!important;
align-self: stretch!important;
}
flexbox 반응형 ★
* (기호) : 분기점 (breakpoint) 표시 문구 들어갈 자리.sm , md , lg , xl
[플렉스 컨테이너]
.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 : 플렉스 아이템 "주변"에 공백 넣어 정렬.
결과보기
[너비 채우기 / 동일 너비]
.flex-*-fill : 플렉스 아이템 동일 너비강제 적용.
결과보기
[너비 늘리기]
.flex-*-grow-0 : 아이템 차지 너비 안 늘리기
.flex-*-grow-1 : 아이템 차지 너비 늘리기
결과보기
[너비 줄이기]
.flex-*-shrink-0 : 아이템 차지 너비 줄이지 않기.
.flex-*-shrink-1 : 아이템 차지 너비 줄이기
결과보기
[아이템 순서 조정]
.order-*-0 : 순서 조정. (0 ~ 12 가능)
~
.order-*-12
결과보기
[아이템 감싸기]
.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 : 다른 화면에서 플렉스 항목을 늘임.
결과보기
