今回は【CSS】align-contentの使い方、アイテムの縦方向の揃え位置を指定する!
の解説になります!
こんな方に読んでほしい
- CSSを学び始めた方へ
-
display
プロパティについて学びたい方へ - 今回はalign-contentでflexboxアイテムの縦方向の揃え位置を指定する解説になります。
前回は、align-self
プロパティで指定した、flexboxアイテムのクロス軸に沿って配置する位置を個別に指定についての解説になりました。
【CSS】align-selfの使い方、アイテムの位置を個別に指定する!
Flexboxでは様々なレイアウトが可能になります。
現在はほとんどのブラウザやデバイスが対応していますので、是非参考にしてみてください。
指定項目が多いため、パートに分けて解説していきます。
align-contentの使い方について
align-content
プロパティとは、flexboxアイテムが複数行あった際に、クロス軸に対して配置が可能になります。
align-content
はflexboxアイテムを
クロス軸(縦方向)に対して配置します。
今回はここを解説!
justify-content
はflexboxアイテムを
メイン軸(横方向)に対して配置します。
※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。
書き方は以下のようになります
/*-- ○ align-contentが適用される例--*/
親要素 {
display: flex / inline-flex;
align-content: 値;
/*--内訳
①display: flex;
②display: inline-flex;
①か②のどちらかを指定します。
--*/
}
/*-- × align-contentが適用されない例--*/
親要素 {
display: flex / inline-flex;
flex-wrap: nowarp; /*--flexboxアイテムは折り返しされません--*/
align-content: 値;
}
ポイント!
flexboxコンテナ(親要素)にflex-wrap:nowarpが適用されていると、
flexboxアイテム(子要素)が一行になり、折り返しはされず、align-contentは無効になります。
align-contentの指定について
align-self
プロパティとは、flexboxアイテムが複数行あった際に、クロス軸に対して配置し指定します。
align-contentは6つの指定方法があります。各、値を解説していきます。
- 指定できる値
- stretch(初期値)
flexboxコンテナ(親要素)のクロス軸に合わせて、自動調整されます
- flex-start
flexboxコンテナのクロス軸に合わせて、
上部に配置します
- flex-end
flexboxコンテナのクロス軸に合わせて、
下部に配置します
- center
flexboxコンテナのクロス軸に合わせて、
中央に配置します
- space-between
flexboxアイテムの最初を開始点に、最後を終了点に、残りは均等に配置します
- space-around
flexboxコンテナのクロス軸に合わせて、flexboxアイテムを等間隔に配置します
共通指定について
displayプロパティである、「flex / inline-flex」を親要素に指定することで、その要素をflexboxコンテナ(入れ物、箱)に指定できます。
flexboxコンテナ(親要素)の子要素は自動的にflexboxアイテムのなり、さまざまなレイアウトが可能になります。
ポイント!
①親要素にdisplayプロパティである、「flex / inline-flex」を指定します。
②子要素は自動的にflexboxアイテムになります。
※子要素にdisplayプロパティは指定しないようにしましょう!!
共通HTML・CSS
<!--親要素-->
<div class="flex-container">
<!--子要素-->
<div class="flex-item">①</div>
<div class="flex-item">②</div>
<div class="flex-item">③</div>
</div>
/*--親要素--*/
.flex-container {
background-color: #ffffff;
border: solid 5px #fb6158;
padding: 40px;
box-sizing: border-box;
}
/*--子要素--*/
.flex-item {
text-align: center;
background-color: #1ece50;
color: #ffffff;
box-sizing: border-box;
padding: 30px;
font-size: 20px;
font-weight: bold;
}
親要素にdisplayプロパティである、「flex / inline-flex」を指定はしていません。
displayプロパティを指定していないため、子要素は横並びにはならず、左寄せの状態になっております。
stretch使用例
stretch
プロパティとは、flexboxコンテナ(親要素)のクロス軸に合わせて、自動調整されます
今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。
<div class="flex-container">
<div class="flex-item align-item-1">①</div>
<div class="flex-item align-item-2">②</div>
<div class="flex-item align-item-3">③</div>
<div class="flex-item align-item-4">④</div>
<div class="flex-item align-item-5">⑤</div>
<div class="flex-item align-item-6">⑥</div>
</div>
</div>
/*--親要素--*/
.flex-container {
display: flex;
align-content: stretch; /*-align-contentを指定--*/
/*--以下装飾--*/
background-color: #ffffff;
border: solid 5px #fb6158;
}
/*--子要素--*/
.flex-item {/*--装飾省略--*/}
.flex-item > * {width: 33.333%;}
flex-start使用例
flex-start
プロパティとは、flexboxコンテナのクロス軸に合わせて、上部に配置されます
今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。
<div class="flex-container">
<div class="flex-item align-item-1">①</div>
<div class="flex-item align-item-2">②</div>
以下省略
</div>
</div>
/*--親要素--*/
.flex-container {
display: flex;
align-content: flex-start; /*-align-contentを指定--*/
/*--以下装飾--*/
background-color: #ffffff;
border: solid 5px #fb6158;
}
/*--子要素--*/
.flex-item {/*--装飾省略--*/}
.flex-item > * {width: 33.333%;}
flex-end使用例
flex-end
プロパティとは、flexboxコンテナのクロス軸に合わせて、下部に配置されます
今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。
<div class="flex-container">
<div class="flex-item align-item-1">①</div>
<div class="flex-item align-item-2">②</div>
以下省略
</div>
</div>
/*--親要素--*/
.flex-container {
display: flex;
align-content: flex-end; /*-align-contentを指定--*/
/*--以下装飾--*/
background-color: #ffffff;
border: solid 5px #fb6158;
}
/*--子要素--*/
.flex-item {/*--装飾省略--*/}
.flex-item > * {width: 33.333%;}
center使用例
center
プロパティとは、flexboxコンテナのクロス軸に合わせて、中央に配置されます
今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。
<div class="flex-container">
<div class="flex-item align-item-1">①</div>
<div class="flex-item align-item-2">②</div>
以下省略
</div>
</div>
/*--親要素--*/
.flex-container {
display: flex;
align-content: center; /*-align-contentを指定--*/
/*--以下装飾--*/
background-color: #ffffff;
border: solid 5px #fb6158;
}
/*--子要素--*/
.flex-item {/*--装飾省略--*/}
.flex-item > * {width: 33.333%;}
space-between使用例
space-between
プロパティとは、flexboxアイテムの最初を開始点に、最後を終了点に、残りは均等に配置されます
今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。
<div class="flex-container">
<div class="flex-item align-item-1">①</div>
<div class="flex-item align-item-2">②</div>
以下省略
</div>
</div>
/*--親要素--*/
.flex-container {
display: flex;
align-content: space-between; /*-align-contentを指定--*/
/*--以下装飾--*/
background-color: #ffffff;
border: solid 5px #fb6158;
}
/*--子要素--*/
.flex-item {/*--装飾省略--*/}
.flex-item > * {width: 33.333%;}
space-around使用例
space-around
プロパティとは、flexboxコンテナのクロス軸に合わせて、flexboxアイテムを等間隔に配置されます
今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。
<div class="flex-container">
<div class="flex-item align-item-1">①</div>
<div class="flex-item align-item-2">②</div>
以下省略
</div>
</div>
/*--親要素--*/
.flex-container {
display: flex;
align-content: space-around; /*-align-contentを指定--*/
/*--以下装飾--*/
background-color: #ffffff;
border: solid 5px #fb6158;
}
/*--子要素--*/
.flex-item {/*--装飾省略--*/}
.flex-item > * {width: 33.333%;}
関連記事
まとめ
今回はこれで以上です。
今回でdisplayについての解説は以上になります。
- POINT
-
align-content
flexboxアイテムが複数行あった際に、クロス軸に対して配置し指定します。 - flexboxコンテナ(親要素)にflex-wrap:nowarpが適用されていると、
flexboxアイテム(子要素)が一行になり、折り返しはされず、align-contentは無効になります。 -
align-content
はflexboxアイテムをクロス軸(縦方向)に対して配置します。 -
justify-content
はflexboxアイテムをメイン軸(横方向)に対して配置します。 - ※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。
スポンサーリンク
SHU
1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。
最新記事
関連記事