bootstrap4

bootstrap4.css

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

■レイアウト：Flex d-flex：ユーティリティ：flex文字の伸縮デフォルト

flex文字01

flex文字02

flex文字03

  <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 d-flex：ユーティリティ：flex文字の伸縮 flex-grow　余白を埋める機能

flex文字01（flex-grow-1）

flex文字02

flex文字03

  <div class="d-flex" style="height: 100px">
    <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 d-flex：ユーティリティ：flex文字の伸縮 flex-shrink　余白で縮小される（他を優先）

flex文字01（flex-shrink-1）

flex文字02

flex文字03

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

■レイアウト：Flex d-flex：ユーティリティ：flex自動マージン左側に分離（ml-auto）

flex文字1

flex文字2

flex文字3

  <div class="d-flex">
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div class="ml-auto p-2">flex文字3</div>
  </div>