• Q&A
  • 회원가입
  • 로그인

[basic] BS4 - Flex (BS플렉스박스) ★★★★★

206  
목차
  1. flexbox 블럭 vs 인라인
  2. flexbox 수평 정렬 (왼쪽/오른쪽)
  3. flexbox 수직 정렬 (기본/역순)
  4. flexbox 아이템 끝선 정렬
  5. flexbox 아이템 동일 너비 설정
  6. flexbox 나머지 너비 (차지/제거)
  7. flexbox 아이템 순서 조정
  8. flexbox 자동 마진
  9. flexbox 아이템 감싸기
  10. flexbox 아이템 내용 위치/정렬
  11. flexbox 아이템 위치/정렬
  12. flexbox 자체 정렬
  13. 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  :  다른 화면에서 플렉스 항목을 늘임.

 

결과보기 



찾아주셔서 감사합니다. Since 2012