SHU BLOG

BLOG NEWS ブログ

  • ARTICLE
    2020.11.23
  • CATEGORY
TITLE

【CSS】align-contentの使い方、アイテムの縦方向の揃え位置を指定する!

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は【CSS】align-contentの使い方、アイテムの縦方向の揃え位置を指定する!
の解説になります!

こんな方に読んでほしい

  • CSSを学び始めた方へ
  • displayプロパティについて学びたい方へ
  • 今回はalign-contentでflexboxアイテムの縦方向の揃え位置を指定する解説になります。

前回は、align-selfプロパティで指定した、flexboxアイテムのクロス軸に沿って配置する位置を個別に指定についての解説になりました。
【CSS】align-selfの使い方、アイテムの位置を個別に指定する!

Flexboxでは様々なレイアウトが可能になります。
現在はほとんどのブラウザやデバイスが対応していますので、是非参考にしてみてください。
指定項目が多いため、パートに分けて解説していきます。

align-contentの使い方について

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
    今回はここを解説!
    flexboxアイテムが複数行あった際に、クロス軸に対して配置し指定します。
  • display flex / inline-flex 
    解説の記事ありますよ
    flexboxコンテナを指定します。

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アイテムを等間隔に配置します

共通指定について

flex / inline-flexの指定について

displayプロパティである、「flex / inline-flex」を親要素に指定することで、その要素をflexboxコンテナ(入れ物、箱)に指定できます。
flexboxコンテナ(親要素)の子要素は自動的にflexboxアイテムのなり、さまざまなレイアウトが可能になります。

ポイント!
①親要素にdisplayプロパティである、「flex / inline-flex」を指定します。
②子要素は自動的にflexboxアイテムになります。
※子要素にdisplayプロパティは指定しないようにしましょう!!

共通HTML・CSS

基本となるHTML

<!--親要素-->
<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使用例

stretchプロパティとは、flexboxコンテナ(親要素)のクロス軸に合わせて、自動調整されます

今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。

stretch使用例

<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使用例

flex-startプロパティとは、flexboxコンテナのクロス軸に合わせて、上部に配置されます

今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。

flex-start使用例

<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使用例

flex-endプロパティとは、flexboxコンテナのクロス軸に合わせて、下部に配置されます

今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。

flex-end使用例

<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使用例

centerプロパティとは、flexboxコンテナのクロス軸に合わせて、中央に配置されます

今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。

center使用例

<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使用例

space-betweenプロパティとは、flexboxアイテムの最初を開始点に、最後を終了点に、残りは均等に配置されます

今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。

space-between使用例

<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使用例

space-aroundプロパティとは、flexboxコンテナのクロス軸に合わせて、flexboxアイテムを等間隔に配置されます

今回はflexboxアイテム①〜⑥を配置します。
「flexboxアイテムをwidth: 33.333%」に指定しています。

space-around使用例

<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%;}

関連記事

【STEP01】display flexの使い方、横並びを指定しよう!
flexboxコンテナ(入れ物、箱)に指定します。
【STEP02】flex-directionの使い方、配置する方向を指定する
flex-directionとは、flexboxアイテムを配置する方向を指定します。
【STEP03】flex-wrapの使い方、アイテムの折り返しを指定する
flex-wrapとは、flexboxアイテムの折り返しを指定します
【STEP04】orderの使い方、アイテムの配置する順番を指定する
orderとは、flexboxアイテムの順番を指定します。
【STEP05】flex-grow -shrinkの使い方、アイテムの伸び、縮みの倍率を指定する
flexboxアイテムの伸び、縮みの倍率を指定します。
【STEP06】flex-basis使い方、アイテムの幅を指定する
flexboxアイテムの幅を指定します。
【STEP07】justify-content使い方、アイテムの配置する位置を指定する
flexboxコンテナのメイン軸の開始点から配置します。
【STEP08】align-itemsの使い方、配置する位置を指定する
flexboxアイテムのクロス軸に沿って配置する位置を指定します。
【STEP09】align-selfの使い方、アイテムの位置を個別に指定する
flexboxアイテムのクロス軸に沿って配置する位置を個別に指定します。

まとめ

今回はこれで以上です。
今回でdisplayについての解説は以上になります。

POINT
  • align-contentflexboxアイテムが複数行あった際に、クロス軸に対して配置し指定します。
  • flexboxコンテナ(親要素)にflex-wrap:nowarpが適用されていると、
    flexboxアイテム(子要素)が一行になり、折り返しはされず、align-contentは無効になります。
  • align-contentはflexboxアイテムをクロス軸(縦方向)に対して配置します。
  • justify-contentはflexboxアイテムをメイン軸(横方向)に対して配置します。
  • ※必ず、親要素にdisplay:flexまたはinline-flexを指定しておきましょう。
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top