CSSのalign-content:centerでフレックスラインをコンテナの中央に配置する方法
CSSでフレックスライン（flex line）をコンテナの中央に配置したい場合は、align-contentプロパティにcenterを指定します。これにより、複数行に折り返されたフレックスアイテム全体が、交差軸（クロス axis）方向の中央にまとめて配置されます。
align-contentプロパティとは
align-contentは、フレックスコンテナ内の複数のフレックスラインがどのように分布するかを制御するプロパティです。
なお、このプロパティが機能するのは、flex-wrapプロパティがwrapまたはwrap-reverseに設定され、アイテムが2行以上に折り返されている場合のみです。単一行の場合は効果がないため注意してください。
以下のコードでは、赤い背景のコンテナに対してalign-content: center;を適用し、黄色いフレックスアイテムのラインを垂直方向の中央に表示しています。
コード例
<!DOCTYPE html>
<html>
<head>
<style>
.mycontainer {
display: flex;
height: 200px;
background-color: red;
align-content: center;
flex-wrap: wrap;
}
.mycontainer > div {
background-color: yellow;
text-align: center;
line-height: 60px;
font-size: 30px;
width: 100px;
margin: 5px;
}
</style>
</head>
<body>
<h1>Queue</h1>
<div class="mycontainer">
<div>Q1</div>
<div>Q2</div>
<div>Q3</div>
<div>Q4</div>
<div>Q5</div>
<div>Q6</div>
<div>Q7</div>
<div>Q8</div>
</div>
</body>
</html>
コードのポイント解説
- display: flex; … コンテナをフレックスボックスとして定義します。
- height: 200px; … コンテナに高さを持たせることで、折り返しが発生し中央揃えの効果が確認できます。
- flex-wrap: wrap; … アイテムがコンテナの幅を超えると次の行へ折り返します。
- align-content: center; … 折り返されたすべてのフレックスラインをコンテナの中央に集めます。
このコードを実行すると、Q1〜Q8の8つのアイテムが2行に分かれ、そのライン全体が高さ200pxの赤いコンテナの上下中央に表示されます。
-
CSSでフレックスラインをコンテナの先頭に表示する方法(align-content: flex-start)
CSSのalign-contentプロパティにflex-startという値を指定すると、フレックスコンテナ内の複数のフレックスライン(行)をコンテナの先頭側に寄せて配置できます。 align-content: flex-startの基本 align-contentプロパティは、交差軸(cross axis)方向におけるフレックスライン全体の配置を制御するプロパティです。flex-startを指定すると、すべてのフレックスラインが交差軸の開始位置、つまりコンテナの先頭にまとめられて表示されます。 注意点として、align-contentが機能するのはflex-wrap: wrap;などで折り
-
CSSのalign-content: space-betweenでフレックスラインを等間隔に配置する方法
CSS Flexboxでは、複数行に折り返されたフレックスアイテム（フレックスライン）の間隔を調整するために、align-contentプロパティを使用します。この記事では、値としてspace-betweenを指定する方法を解説します。space-betweenとは？align-content: space-between;を指定すると、コンテナ内の余白が均等に分配され、最初のフレックスラインはコンテナの先頭に、最後のフレックスラインはコンテナの末尾に配置されます。そして、残りのライン同士の間には等しい間隔が自動的に挿入されます。なお、align-contentプロパティが機能するためには、親