行の枠の高さは揃えた状態で、内部の枠の縦方向の整列方法を変更する (同一行の枠の高さをそろえた状態で、内部の枠の縦位置を中央揃え、下端揃えにする) - CSS

Flexbox の内部の枠の行の枠の高さは揃えた状態で、内部の枠の縦方向の整列方法を変更するコードを紹介します。

概要

Flexbox を利用して枠を段組みして、枠の折り返しも発生する場合に、枠の行の高さは揃えた状態で、縦方向の整列方法を変更するにはalign-content プロパティを利用します。

書式

align-content: (整列方法);

整列方法
名称	意味
flex-start	上端で揃えます
center	中央で揃えます
flex-end	下端で揃えます
space-between	均等に行が配置されます。行間にスペースが均等に配置されます。(一番最初の行の上と一番最後の行の下にはスペースは配置されません)
space-around	均等に行が配置されます。行間にスペースが均等に配置されます。(一番最初の行の上と一番最後の行の下にもスペースが配置されます)
stretch	枠の高さを外側の枠の大きさまで広げます

実装例

コード

以下のCSS、HTMLファイルを作成します。

ContentAlignVertical.css

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-content: center;
}

.Frame {
  width:180px;
  border:1px solid #00a1ff;
}

ContentAlignVertical.css

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="ContentAlignVertical.css" />
</head>
<body>
  <div class="Container">
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
    </div>
    <div class="Frame">
      12345<br />
      abcde<br />
      あいうえお<br />
    </div>
  </div>
</body>
</html>

解説

外側の枠には display:flex; を指定し、Flexbox表示に設定します。flex-wrapプロパティを設定し枠が折り返しされる表示設定にします。
align-content: center;により、枠の縦方向の表示位置を中央揃えに設定します。

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-content: center;
}

内部の枠はwidthプロパティで枠の幅を設定します。

.Frame {
  width:180px;
  border:1px solid #00a1ff;
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
外側の枠の高さの中央に内部の枠が表示されます。また、同じ行での枠の高さは揃えられていることも確認できます。

表示結果 (flex-start を指定した場合)

align-contentプロパティに flex-start を指定した場合の表示です。

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-content: flex-start;
}

flex-start を設定した場合には枠の上端揃えで内部の枠が表示されます。また、同じ行での枠の高さは揃えられていることも確認できます。

表示結果 (flex-end を指定した場合)

align-contentプロパティに flex-end を指定した場合の表示です。

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-content: flex-end;
}

flex-end を設定した場合には枠の下端揃えで内部の枠が表示されます。また、同じ行での枠の高さは揃えられていることも確認できます。

表示結果 (space-between を指定した場合)

align-contentプロパティに space-between を指定した場合の表示です。

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-content: space-between;
}

space-between を設定した場合には枠の内部の高さ方向に均等に内部の枠が表示されます。枠の最初の行の上部と最後の行の下部には余白は表示されません。また、同じ行での枠の高さは揃えられていることも確認できます。

表示結果 (space-aroundを指定した場合)

align-contentプロパティに space-aroundを指定した場合の表示です。

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-content: space-around;
}

space-around を設定した場合には枠の内部の高さ方向に均等に内部の枠が表示されます。space-betweenとの違いは、枠の最初の行の上部と最後の行の下部にも余白が設定される表示になる点です。
同じ行での枠の高さは揃えられていることも確認できます。

表示結果 (stretchを指定した場合)

align-contentプロパティに stretchを指定した場合の表示です。

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
  align-content: stretch;
}

stretchを指定した場合は、コンテンツの高さに応じた高さで枠の高さが設定されます。
同じ行での枠の高さは揃えられて表示されます。

表示結果 (align-contentプロパティを指定しない場合)

align-contentプロパティを記述しなかった場合は、stretch を指定した場合と同じ表示結果となります。

.Container {
  display: flex;
  border: 1px solid #ff0000;
  flex-wrap: wrap;
  height: 480px;
}

著者

とりっち

iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。

目次