p-2

bootstrap5.css

bootstrap5.css
.gap-2 {
  gap: 0.5rem !important;
}
bootstrap5.css
.p-2 {
  padding: 0.5rem !important;
}

html bootstrap5 Sample

flexコンテナを左と右側でそれぞれ真ん中空ける形式:ms-auto


flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <!-- mr-autoが右寄せ マージンユーティリティ-->
    <!-- 同階層のカラムを強制的にオフセットするということと同じ -->
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div class="ms-auto p-2">flex文字3</div>
  </div>

flex文字数で伸縮 デフォルト:d-flex


flex文字01
flex文字02
flex文字03
  <!-- flex文字の幅で伸長する -->
  <div class="d-flex" style="height: 100px">
    <div class="p-2">flex文字01</div>
    <div class="p-2">flex文字02</div>
    <div class="p-2">flex文字03</div>
  </div>

flexの幅を伸縮で埋める機能:flex-grow


flex文字01(flex-grow-1)
flex文字02
flex文字03
  <div class="d-flex" style="height: 100px">
    <!--flex文字の幅を伸長で調整する(残り全部) -->
    <div class="p-2 flex-grow-1">flex文字01(flex-grow-1)</div>
    <div class="p-2">flex文字02</div>
    <div class="p-2">flex文字03</div>
  </div>

flexの幅を縮小で調整する(他を優先):flex-shrink


flex文字01(flex-shrink-1)
flex文字02
flex文字03
  <!-- flex文字の幅を縮小で調整する -->
  <div class="d-flex" style="height: 100px">
    <div class="p-2 flex-shrink-1">flex文字01(flex-shrink-1)</div>
    <div class="p-2 w-100">flex文字02</div>
    <div class="p-2 w-100">flex文字03</div>
  </div>