align-items と align-content の違いを紹介します。
align-items プロパティはFlexbox行内での整列方法を設定します。一方、align-content プロパティは内部の枠全体を整列する方法を設定します。
以下のHTML、CSSファイルを作成します。
.Container {
display: flex;
border: 1px solid #ff0000;
flex-wrap: wrap;
height: 480px;
align-content: center;
align-items:center;
}
.Frame {
width:180px;
border:1px solid #00a1ff;
}
<!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>
</body>
</html>
行は上揃えになります。行内の枠も上揃えになります。
行は上揃えになります。行内の枠は中央揃えになります。
行は上揃えになります。行内の枠は下揃えになります。
行は上揃えになります。行内の枠は一番高さのある枠に大きさが揃えられます。
行全体は中央揃えになります。行内の枠は上揃えになります。
行全体は中央揃えになります。行内の枠に中央揃えになります。
行全体は中央揃えになります。行内の枠は下揃えになります。
行全体は中央揃えになります。行内の枠は一番高さのある枠に大きさが揃えられます
行全体は下揃えになります。行内の枠は上揃えになります。
行全体は下揃えになります。行内の枠に中央揃えになります。
行全体は下揃えになります。行内の枠は下揃えになります。
行全体は下揃えになります。行内の枠は一番高さのある枠に大きさが揃えられます。
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は上揃えになります。
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は中央揃えになります。
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は下揃えになります。
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は一番高さのある枠に大きさが揃えられます。
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は上揃えになります。
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は中央揃えになります。
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は下揃えになります。
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は一番高さのある枠に大きさが揃えられます。
行全体は均等に配置されます。行内の枠は上揃えになります。
行全体は均等に配置されます。行内の枠は中央揃えになります。
行全体は均等に配置されます。行内の枠は下揃えになります。
行全体は均等に配置されます。行内の枠は行いっぱいの高さで大きさが揃えられます。
