align-items と align-content の違い
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>
align-content:flex-start
align-content:flex-start, align-items:flex-start の場合
行は上揃えになります。行内の枠も上揃えになります。
align-content:flex-start, align-items:center の場合
行は上揃えになります。行内の枠は中央揃えになります。
align-content:flex-start, align-items:flex-end の場合
行は上揃えになります。行内の枠は下揃えになります。
align-content:flex-start, align-items:stretch の場合
行は上揃えになります。行内の枠は一番高さのある枠に大きさが揃えられます。
align-content:center
align-content:center, align-items:flex-start の場合
行全体は中央揃えになります。行内の枠は上揃えになります。
align-content:center, align-items:center の場合
行全体は中央揃えになります。行内の枠に中央揃えになります。
align-content:center, align-items:flex-end の場合
行全体は中央揃えになります。行内の枠は下揃えになります。
align-content:center, align-items:stretch の場合
行全体は中央揃えになります。行内の枠は一番高さのある枠に大きさが揃えられます
align-content:flex-end,
align-content:flex-end, align-items:flex-start の場合
行全体は下揃えになります。行内の枠は上揃えになります。
align-content:flex-end, align-items:center の場合
行全体は下揃えになります。行内の枠に中央揃えになります。
align-content:flex-end, align-items:flex-end の場合
行全体は下揃えになります。行内の枠は下揃えになります。
align-content:flex-end, align-items:stretch の場合
行全体は下揃えになります。行内の枠は一番高さのある枠に大きさが揃えられます。
align-content:space-between
align-content:space-between, align-items:flex-start の場合
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は上揃えになります。
align-content:space-between, align-items:center の場合
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は中央揃えになります。
align-content:space-between, align-items:flex-end の場合
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は下揃えになります。
align-content:space-between, align-items:stretch の場合
行全体は上端と下端に余白の無い状態で均等に配置されます。行内の枠は一番高さのある枠に大きさが揃えられます。
align-content:space-around
align-content:space-around, align-items:flex-start の場合
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は上揃えになります。
align-content:space-around, align-items:center の場合
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は中央揃えになります。
align-content:space-around, align-items:flex-end の場合
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は下揃えになります。
align-content:space-around, align-items:stretch の場合
行全体は上端と下端に余白のある状態で均等に配置されます。行内の枠は一番高さのある枠に大きさが揃えられます。
align-content:stretch
align-content:stretch, align-items:flex-start の場合
行全体は均等に配置されます。行内の枠は上揃えになります。
align-content:stretch, align-items:center の場合
行全体は均等に配置されます。行内の枠は中央揃えになります。
align-content:stretch, align-items:flex-end の場合
行全体は均等に配置されます。行内の枠は下揃えになります。
align-content:stretch, align-items:stretch の場合
行全体は均等に配置されます。行内の枠は行いっぱいの高さで大きさが揃えられます。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
