bootstrap4

bootstrap4.css

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

bootstrap4.css

@media (min-width: 768px) {
  .d-md-none {
    display: none !important;
  }
  .d-md-inline {
    display: inline !important;
  }
  .d-md-inline-block {
    display: inline-block !important;
  }
  .d-md-block {
    display: block !important;
  }
  .d-md-table {
    display: table !important;
  }
  .d-md-table-row {
    display: table-row !important;
  }
  .d-md-table-cell {
    display: table-cell !important;
  }
  .d-md-flex {
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-md-inline-flex {
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}

■レイアウト：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>

■リストグループ：list-group：コンポーネント：バッジ付きリストグループ

リスト項目1 14
リスト項目2 2
リスト項目3 1

  <section class="w-50 m-auto my-5">
      <ul class="list-group">
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目1
      <span class="badge badge-primary badge-pill">14</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目2
      <span class="badge badge-primary badge-pill">2</span>
    </li>
    <li class="list-group-item d-flex justify-content-between align-items-center">
      リスト項目3
      <span class="badge badge-primary badge-pill">1</span>
    </li>
  </ul>
</section>

■リストグループ：list-group：コンポーネント：カスタムコンテンツの　リストグループ aタグ

リスト項目1のヘッダ

3日前

リスト項目1のコンテンツの見本です。

リスト項目1のサブコンテンツです

リスト項目2のヘッダ

3日前

リスト項目2のコンテンツの見本です。

リスト項目2のサブコンテンツです。

リスト項目3のヘッダ

3日前

リスト項目3のコンテンツの見本です。

リスト項目3のサブコンテンツです。

  <section class="w-50 m-auto my-5">
    <div class="list-group">
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start active">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目1のヘッダ</h5>
        <small>3日前</small>
      </div>
      <p class="mb-1">リスト項目1のコンテンツの見本です。</p>
      <small>リスト項目1のサブコンテンツです</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目2のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目2のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目2のサブコンテンツです。</small>
    </a>
    <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
      <div class="d-flex w-100 justify-content-between">
        <h5 class="mb-1">リスト項目3のヘッダ</h5>
        <small class="text-muted">3日前</small>
      </div>
      <p class="mb-1">リスト項目3のコンテンツの見本です。</p>
      <small class="text-muted">リスト項目3のサブコンテンツです。</small>
    </a>
  </div>
  </section>

■ドロップダウン：dropdown-menu：コンポーネント：ドロップダウン方向を変更する

<div class="container py-5 d-flex justify-content-center">
  <!-- 上方向へのドロップ -->
  <div class="btn-group dropup">
    <!-- 切り替えボタン -->
    <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">上方向へのドロップ</button>
    <!-- ドロップダウンメニュー -->
    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <a class="dropdown-item" href="#">メニュー01</a>
      <a class="dropdown-item" href="#">メニュー02</a>
      <a class="dropdown-item" href="#">メニュー03</a>
    </div>
  </div>
</div>