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>