■レイアウト:Flex d-flex:ユーティリティ:flexの折り返し flex-nowrap 折り返しなし

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-nowrap">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの折り返し flex-wrap いい感じで自動で折り返す

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-wrap">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの折り返し flex-wrap-reverse いい感じで自動で折り返す、ボトムを合わせる

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex flex-wrap-reverse">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-start 高さ固定

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-start flex-wrap" style="height: 200px">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-end 高さ固定

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-end flex-wrap" style="height: 200px">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-center 高さ固定

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-center flex-wrap" style="height: 200px">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-between 高さ固定

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-between flex-wrap" style="height: 200px">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-around 高さ固定

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-around flex-wrap" style="height: 200px">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flexの自動整列 align-content-stretch 縦の高さも勝手に合わせてくる

flex文字01
flex文字02
flex文字03
flex文字04
flex文字05
flex文字06
flex文字07
flex文字08
flex文字09
flex文字10
flex文字11
flex文字12
<div class="d-flex align-content-stretch flex-wrap" style="height: 400px">
  <div>flex文字01</div>
  <div>flex文字02</div>
  <div>flex文字03</div>
  <div>flex文字04</div>
  <div>flex文字05</div>
  <div>flex文字06</div>
  <div>flex文字07</div>
  <div>flex文字08</div>
  <div>flex文字09</div>
  <div>flex文字10</div>
  <div>flex文字11</div>
  <div>flex文字12</div>
</div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-stretch

flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-stretch" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-start

flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-start" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-end

flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-end" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-center

flex文字01
flex文字02
flex文字03
  <div class="d-flex align-items-center" style="height: 200px">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flex交差軸方向の整列 align-items-baseline

flex文字01
(padding: 2rem)
flex文字02
(padding: 4rem)
flex文字03
(padding: 1rem)
  <div class="d-flex align-items-baseline" style="height: 200px">
    <div style="padding: 2rem">flex文字01 <br>(padding: 2rem)</div>
    <div style="padding: 4rem">flex文字02 <br>(padding: 4rem)</div>
    <div style="padding: 1rem">flex文字03 <br>(padding: 1rem)</div>
  </div>
  
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-stretch

flex文字01
flex文字02(align-self-stretch)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-stretch">flex文字02(align-self-stretch)</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-start

flex文字01
flex文字02(align-self-start)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-start">flex文字02(align-self-start)</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-end

flex文字01
flex文字02(align-self-end)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-end">flex文字02(align-self-end)</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-center

flex文字01
flex文字02(align-self-center)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-center">flex文字02(align-self-center)</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexを交差軸上で個別に整列 align-self-baseline

flex文字01
flex文字02(align-self-baseline)
flex文字03
  <div class="d-flex" style="height: 100px">
    <div>flex文字01</div>
    <div class="align-self-baseline">flex文字02(align-self-baseline)</div>
    <div>flex文字03 </div>
  </div>
  
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナ全幅等幅整列 デフォルト 左から並ぶ 改行はしない

flex文字01
flex文字02
flex文字03
  <div class="d-flex">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナ全幅等幅整列 flex-fill 横幅で等幅

flex文字01
flex文字02
flex文字03
  <div class="d-flex">
    <div class="flex-fill">flex文字01</div>
    <div class="flex-fill">flex文字02</div>
    <div class="flex-fill">flex文字03</div>
  </div>
  
  
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向 左から右(flex-row)

flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-row">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向右から左(flex-row-reverse)

flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-row-reverse">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向上から下(flex-column)縦並びも横並びと同じ発想

flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-column">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向下から上(flex-column-reverse)

flex文字01
flex文字02
flex文字03
  <div class="d-flex flex-column-reverse">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
  
■レイアウト: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文字の表示順序を入れ替えるクラス

flex文字01
flex文字02
flex文字03
  <div class="d-flex">
    <div class="order-1">flex文字01</div>
    <div class="order-3">flex文字02</div>
    <div class="order-2">flex文字03</div>
  </div>
  
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-start

flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-start">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-end

flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-end">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-center

flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-center">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-between

flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-between">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flexコンテナの主軸方向の整列 justify-content-around

flex文字01
flex文字02
flex文字03
  <div class="d-flex justify-content-around">
    <div>flex文字01</div>
    <div>flex文字02</div>
    <div>flex文字03</div>
  </div>
  
■レイアウト:Flex d-flex:ユーティリティ:flex自動マージン デフォルト(自動マージンなし)

flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <div>flex文字1</div>
    <div>flex文字2</div>
    <div>flex文字3</div>
  </div>
■レイアウト:Flex d-flex:ユーティリティ:flex自動マージン 右側に分離(mr-auto)ナビ的な場合に、左と右側でそれぞれ真ん中空ける形式

flex文字1
flex文字2
flex文字3
  <div class="d-flex">
    <div class="mr-auto">flex文字1</div>
    <div>flex文字2</div>
    <div>flex文字3</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>