カードを右下に配置するFlexboxの使い方【HTML/CSS・サンプルコード付き】

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コードをUTF-8に設定 -->
  <meta charset="UTF-8">

  <!-- スマートフォンなどで画面幅に合わせて表示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>カードを右下に配置するFlexbox</title>

  <!-- 外部CSSファイルを読み込む -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <div class="flexbox-right-bottom_page">

    <!-- justify-content:flex-end;とalign-items:flex-end;で右下へ配置 -->
    <div class="flexbox-right-bottom_method">

      <!-- この方法で使用するFlexboxの指定 -->
      <div class="flexbox-right-bottom_method-title">
        <code>display:flex;<br>justify-content:flex-end;<br>align-items:flex-end;</code>
      </div>

      <!-- 5つの子要素を配置する親要素（Flexコンテナー） -->
      <div class="flexbox-right-bottom_container">

        <!-- 親要素の中へ横一列で並べる5つの子要素（Flexアイテム） -->
        <div class="flexbox-right-bottom_card">1</div>
        <div class="flexbox-right-bottom_card">2</div>
        <div class="flexbox-right-bottom_card">3</div>
        <div class="flexbox-right-bottom_card">4</div>
        <div class="flexbox-right-bottom_card">5</div>

      </div>

    </div>

  </div>

</body>
</html>

body {
  margin: 0;
  padding: 40px 20px;
  background: #ffffff;
  color: #111827;
  font-family: sans-serif;
}

.flexbox-right-bottom_page {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

.flexbox-right-bottom_method-title {
  margin: 0 0 12px;
}

.flexbox-right-bottom_method-title code {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
}


/* =========================================

   Flexbox

========================================= */

/* 5つの子要素を右下へ配置する親要素（Flexコンテナー） */
.flexbox-right-bottom_container {
  display: flex; /* 親要素をFlexコンテナーにして、5つの子要素を横並びにする */
  justify-content: flex-end; /* 今回のrow方向では、5つの子要素を主軸の終端側となる右側へ配置する */
  align-items: flex-end; /* 今回のrow方向では、5つの子要素を交差軸の終端側となる下側へ配置する */
  width: 100%; /* 親要素の横幅を利用できる範囲いっぱいにする */
  max-width: 900px; /* 親要素の最大横幅を900pxにする。値を小さくすると表示範囲が狭くなる */
  height: 200px; /* 親要素の高さを200pxにする。値を大きくすると上下方向の表示範囲が広がる */
  border: 2px dashed #94a3b8; /* 親要素の範囲を確認できる2pxの破線を表示する。値を大きくすると線が太くなる */
  box-sizing: border-box; /* 枠線を含めて指定した横幅と高さで計算する */
}

/* 5つの子要素（Flexアイテム） */
.flexbox-right-bottom_card {
  width: 80px; /* カード1枚の横幅を80pxにする。値を大きくするとカードが横に広がる */
  height: 80px; /* カード1枚の高さを80pxにする。値を大きくするとカードが高くなる */
  border: 1px solid #dbe4f0; /* カードの範囲を確認できる1pxの枠線を表示する。値を大きくすると線が太くなる */
  box-sizing: border-box; /* 枠線を含めて80px × 80pxで計算する */
  text-align: center; /* カード内の数字を左右中央に表示する */
  line-height: 80px; /* カードの高さと同じ80pxにして数字を上下中央に表示する。高さを変更する場合は同じ値へ変更する */
  flex-shrink: 1; /* 横幅が足りない場合にカードを縮小して横一列を維持する */
}