複数行の配置制御
align-content プロパティは、フレックスコンテナ内で複数行になったフレックスアイテムを、交差軸方向にどのように配置するかを制御します。
このプロパティは flex-wrap: wrap または flex-wrap: wrap-reverse が設定され、実際に複数行になった場合にのみ効果を発揮します。
align-items との違い
混同しやすい2つのプロパティの違いを理解しましょう
- align-items: 各行内のアイテムを個別に配置（行ごとの配置）
- align-content: 複数の行全体をまとめて配置（行グループの配置）
align-content の値
align-content プロパティは以下の値を取ることができます。
flex-start（デフォルト）
行を交差軸の開始位置に配置します。
CSS
.flex-container {
align-content: flex-start;
}
1
2
3
4
5
6
7
8
flex-end
行を交差軸の終了位置に配置します。
CSS
.flex-container {
align-content: flex-end;
}
1
2
3
4
5
6
7
8
center
行を交差軸の中央に配置します。
CSS
.flex-container {
align-content: center;
}
1
2
3
4
5
6
7
8
space-between
最初の行を開始位置に、最後の行を終了位置に配置し、残りの行を等間隔で配置します。
CSS
.flex-container {
align-content: space-between;
}
1
2
3
4
5
6
7
8
space-around
各行の周りに等しいスペースを配置します。行間のスペースは、端のスペースの2倍になります。
CSS
.flex-container {
align-content: space-around;
}
1
2
3
4
5
6
7
8
space-evenly
すべてのスペース（行間、端）を等しく配置します。
CSS
.flex-container {
align-content: space-evenly;
}
1
2
3
4
5
6
7
8
stretch
行をコンテナの高さいっぱいに伸ばします。アイテムに明示的な高さが設定されていない場合のみ効果があります。
CSS
.flex-container {
align-content: stretch;
}
1
2
3
4
5
6
7
8
align-items との組み合わせ
align-content と align-items は同時に使用できます。
CSS
.flex-container {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* 行全体の配置 */
align-items: center; /* 各行内での配置 */
}
1
2
3
4
5
6
7
8
試してみよう
align-contentとalign-items の各値の動作を確認してみましょう。
1
2
3
4
5
6
7
8
演習課題: タグクラウドの配置
ブログやSNSでよく見るタグクラウドを作成してください。異なるサイズのタグを複数行で表示し、行全体を均等に配置します。
⛳目標レイアウト
JavaScript
React
CSS
HTML
TypeScript
Node.js
Vue.js
Python
Docker
Git
Flexbox
SCSS
解答例を見る
.tag-cloud {
width: 400px;
height: 300px;
border: 2px solid #ccc;
border-radius: 8px;
padding: 20px;
background-color: #f8f9fa;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
gap: 10px;
}
ポイント:
display: flexでフレックスコンテナにするflex-wrap: wrapで複数行への折り返しを有効にするalign-content: space-evenlyで行間を均等に配置gap: 10pxでタグ間の間隔を統一