개발자를 꿈꾸는 여정

3. 부트스트랩 - 레이아웃 배치 : 정렬 - flex, img 본문

3. Front Developer/3_4. BootStrap

3. 부트스트랩 - 레이아웃 배치 : 정렬 - flex, img

아카라타 2021. 12. 2. 01:32

FLEX

Flex 정렬
Container 배치 :

Justify
content

 <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>

 

Flex 정렬
Container 배치 :

Align
items
<1줄>

 <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>

 

Flex 정렬
item 배치 :

Align self

 <div class="align-self-start">Aligned flex item</div>

<div class="align-self-end">Aligned flex item</div>

<div class="align-self-center">Aligned flex item</div>

<div class="align-self-baseline">Aligned flex item</div>

<div class="align-self-stretch">Aligned flex item</div>

 

Flex 정렬
item 배치 :

Align
content

<2줄
이상>

 

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

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

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

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

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

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










 

Horizontal alignment

Center text

 <div class="text-center">
  <p></p>
</div>

Center image

 <div class="text-center">

  <img src="https://mdbootstrap.com/img/logo/mdb192x192.jpg" class="img-fluid" alt="">

</div>

Center column

 <!--Grid row-->
<div class="row d-flex justify-content-center">

  <!--Grid column-->
  <div class="col-md-6">

    This column is centered

  </div>
  <!--Grid column-->

</div>
<!--Grid row-->

Justify content

 

Clearfix

<div class="bg-info clearfix">
  <button class="btn btn-secondary float-left">Example Button floated left</button>
  <button class="btn btn-secondary float-right">Example Button floated right</button>
</div>

Display

d-{value}

  • none /inline / inline-block /block /table /table-cell /table-row /flex /inline-flex

Embeds (iframe)

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/vlDzYIIOYmM" allowfullscreen></iframe>
</div>

iframe modal

펼치기/접기

<div class="text-center">

  <button type="button" class="btn btn-info" data-toggle="modal" data-target="#modalYT">YouTube Modal</button>
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#modalVM">Vimeo Modal</button>
  <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#modalGM">Google Maps
    Modal</button>

</div>

<!--Modal: Name-->
<div class="modal fade" id="modalYT" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">

    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body mb-0 p-0">

        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
          <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/A3PDXmYoF5U"
            allowfullscreen></iframe>
        </div>

      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <span class="mr-4">Spread the word!</span>
        <a type="button" class="btn-floating btn-sm btn-fb">
          <i class="fab fa-facebook-f"></i>
        </a>
        <!--Twitter-->
        <a type="button" class="btn-floating btn-sm btn-tw">
          <i class="fab fa-twitter"></i>
        </a>
        <!--Google +-->
        <a type="button" class="btn-floating btn-sm btn-gplus">
          <i class="fab fa-google-plus-g"></i>
        </a>
        <!--Linkedin-->
        <a type="button" class="btn-floating btn-sm btn-ins">
          <i class="fab fa-linkedin-in"></i>
        </a>

        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

      </div>

    </div>
    <!--/.Content-->

  </div>
</div>
<!--Modal: Name-->

<!--Modal: Name-->
<div class="modal fade" id="modalVM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">

    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body mb-0 p-0">

        <div class="embed-responsive embed-responsive-16by9 z-depth-1-half">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/115098447"
            allowfullscreen></iframe>
        </div>

      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <span class="mr-4">Spread the word!</span>
        <a type="button" class="btn-floating btn-sm btn-fb">
          <i class="fab fa-facebook-f"></i>
        </a>
        <!--Twitter-->
        <a type="button" class="btn-floating btn-sm btn-tw">
          <i class="fab fa-twitter"></i>
        </a>
        <!--Google +-->
        <a type="button" class="btn-floating btn-sm btn-gplus">
          <i class="fab fa-google-plus-g"></i>
        </a>
        <!--Linkedin-->
        <a type="button" class="btn-floating btn-sm btn-ins">
          <i class="fab fa-linkedin-in"></i>
        </a>

        <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Close</button>

      </div>

    </div>
    <!--/.Content-->

  </div>
</div>
<!--Modal: Name-->

<!--Modal: Name-->
<div class="modal fade" id="modalGM" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">

    <!--Content-->
    <div class="modal-content">

      <!--Body-->
      <div class="modal-body mb-0 p-0">

        <!--Google map-->
        <div id="map-container-2" class="z-depth-1-half" style="height: 400px"></div>

      </div>

      <!--Footer-->
      <div class="modal-footer justify-content-center">

        <button type="button" class="btn btn-primary btn-md">Save location
          <i class="fas fa-map-marker-alt ml-1"></i>
        </button>
        <button type="button" class="btn btn-outline-primary btn-md" data-dismiss="modal">Close
          <i class="fas fa-times ml-1"></i>
        </button>

      </div>

    </div>
    <!--/.Content-->

  </div>
</div>
<!--Modal: Name-->

 

Overflow

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>
<div class="overflow-auto">
  <img src="...">
</div>

<div class="overflow-hidden">
  <img src="...">
</div>

Sizing

<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div class="w-auto p-3" style="background-color: #eee;">Width auto</div>
<div class="w-responsive text-center mx-auto p-3 mt-2" style="background-color: #eee;">Width 75% on large
  devices and 100% on small ones</div>
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
  <div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
  <div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
  <div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
  <div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
  <div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
</div>
mw-100 : Max-width 100%
mh-100 : Max-height 100%

<div class="min-vw-100">Min-width 100vw</div>
<div class="min-vh-100">Min-height 100vh</div>
<div class="vw-100">Width 100vw</div>
<div class="vh-100">Height 100vh</div>

 

'3. Front Developer > 3_4. BootStrap' 카테고리의 다른 글

2. 부트스트랩 - 작성 스타일(문법)  (0) 2021.11.26
1. 부트스트랩 Bootstrap설치  (0) 2021.11.25
'3. Front Developer/3_4. BootStrap' Related Articles more