p-2

bootstrap5.css

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

html bootstrap5 Sample

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

flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <!-- mr-autoが右寄せ -->
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div class="ml-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>