フレックスボックス内の要素の間隔を指定する!align-contentプロパティの設定の仕方を解説

displayプロパティの値をflexにすると生成されるフレックスボックス。

そのボックス内ある要素の間隔を指定するのにalign-contentプロパティを設定します。

フレックスボックス内の要素が複数あるときに、align-contentプロパティを使うケースがありますが、

どのように使うの?

と頭を抱えている方がいるでしょう。

そこで今回は、align-contentプロパティの

・基本的な使い方
・設定に必要なプロパティ
・指定する値

について説明していきます。

align-contentプロパティとは

align-contentプロパティの読み方

align-contentの読み方は、「アライン-コンテンツ」です。alignには揃えるという意味があります。

align-contentプロパティでも同様、contentを揃えるために使われます。

align-contentプロパティの説明

align-contentプロパティは、

フレックスボックス内の要素の間隔を指定

できます。

align-contentプロパティで指定する値によって、間隔を変えられますが、「フレックスボックス」という名前の通り、フレックスボックスを生成するための設定が必要になります。

さらに、サイトの構成次第で、使わなければいけないプロパティがあります。

align-contentプロパティを使うにはどのように設定するのか、「align-contentプロパティの基本的な使い方」で詳しく解説していきます。

align-contentプロパティで利用できる値

align-contentプロパティでは以下の値を使うことができます。

説明
flex-start 基本フレックスボックスの上端に位置を揃えます。
flex-end 基本フレックスボックスの下端に位置を揃えます。
center フレックスボックスの中央に要素を揃えるとき指定します。
space-between 要素を均等に配置し、上の要素は上端に、下の要素は下端に寄せます。
space-around 要素を均等に配置しますが、space-betweenと違い、それぞれの要素の周りの間隔も均等にします。
stretch フレックスボックスの要素の高さに合わせて自動調整されます。

対応ブラウザ

対応ブラウザは以下の通りです。

PC用ブラウザ 対応状況
Chrome 完全対応
Edge 完全対応
Firefox  完全対応
Internet Explorer  完全対応
Opera  完全対応
Safari  完全対応
スマートフォン用ブラウザ 対応状況
Android webview  完全対応
Android版Chrome  完全対応
Android版Firefox  完全対応
Android 版 Opera  完全対応
iOS版Safari  完全対応
Samsung Internet  完全対応

align-contentプロパティの基本的な使い方

align-contentプロパティの使い方

align-contentプロパティを使ったコードが以下になります。

See the Pen
align-contentプロパティの使い方
by 吉井大輝 (@DaiW)
on CodePen.

align-contentプロパティの値を「flex-start」指定することで、要素を上端に揃えられます。

ですが「align-contentプロパティの説明」でご紹介したように、要素を上端に揃えるには、他にも設定する必要があります。

align-contentプロパティを使うのに必要な設定

align-contentプロパティを使うのに何が必要になるのか、「align-contentプロパティの使い方」のコードを交えて説明していきます。

フレックスボックスの生成と要素を折り返させる設定

align-contentプロパティの設定に使う、フレックスボックスの生成や要素を折り返しについて解説していきます。

上記のコードで、displayプロパティにflexという値を指定することで、フレックスボックスを生成できます。

フレックスボックス生成をしたら要素を折り返しの設定をしていきます。要素を折り返すには、flex-wrapプロパティを使い、値にwrapを指定します。

フレックスボックスを生成しても、要素を折り返す設定がないと、align-contentプロパティで指定する「flex-start」が使えません。

しかしflex-wrapプロパティで要素を折り返させるには、フレックスボックスの範囲を指定する以下の2つのプロパティが必要になります。

・widthプロパティ:幅の指定に使う
・heightプロパティ:高さの指定に使う

幅と高さを指定すると、フレックスボックスの範囲を決められます。

「.flex-box」で、align-contentプロパティを使うのに役割が大きいプロパティは、

の4つになります。

「.flex-box」内の4つのプロパティ以外のプロパティも、フレックスボックスの配置や背景色、リストのマーカーを消すといった設定に使っています。

それぞれのプロパティがどのように機能するか、ご紹介したコードを参考に記述して確かめてください。

フレックスボックス内の要素を作る設定

「align-contentプロパティの使い方」のコードで、フレックスボックス内の要素を設定の仕方を見ていきましょう。

aタグがフレックスボックス内の要素になります。

「align-contentプロパティの使い方」のコードと同様に、aタグを要素として機能させるためには、まずdisplayプロパティの値をblockに指定して、ブロックボックスを生成します。

ブロックボックスにしていない状態だと、機能しないプロパティがあります。

次に、aタグのサイズを変えていきます。

サイズを変えるのに使っているのが、paddingプロパティとfont-sizeプロパティです。

paddingプロパティは、上下左右に数値を指定すると、ボックスの内側に余白を作れます。上記のコードのpaddingプロパティの場合、上下左右の余白が10pxできます。

加えて、font-sizeプロパティで文字の大きさを指定します。

paddingプロパティに、font-sizeプロパティも使うことで、aタグを「align-contentプロパティの使い方」のコードのサイズと同じにできます。

ですが、font-sizeプロパティを設定しなかった場合、デフォルトの大きさは、基本16pxになるので、font-sizeプロパティで設定した10pxより、aタグのサイズが変わってしまいます。

そのため、paddingプロパティだけでなく、指定する文字の大きさにも気を付けなければいけません。

「align-contentプロパティの使い方」のaタグと同様のサイズにするには、以下の3つのプロパティが必要です。

3つのプロパティの役割は大きいものですが、「.flex-box a」内の他のプロパティも背景色や文字の位置、要素の配置などに使います。

全てのプロパティを理解するのは難しいので、ご紹介したコードを参考に一つずつプロパティの役割を覚えていくと良いでしょう。

align-contentプロパティで指定する値について

align-contentプロパティで指定する値が違うと、どのように変わるのかいくつかコードを記述していきます。

align-contentプロパティの値をflex-endに指定

See the Pen
align-contentプロパティの値をflex-endに指定
by 吉井大輝 (@DaiW)
on CodePen.

align-contentプロパティの値をspace-betweenに指定

See the Pen
align-contentプロパティの値をspace-betweenに指定
by 吉井大輝 (@DaiW)
on CodePen.

align-contentプロパティの値をspace-aroundに指定

See the Pen
align-contentプロパティの値をspace-aroundに指定
by 吉井大輝 (@DaiW)
on CodePen.

まとめ

いかがでしたでしょうか?

今回、align-contentプロパティの基本的な使い方や設定に必要なプロパティ、指定する値についてご紹介しました。

align-contentプロパティの設定は、フレックスボックスや要素など、サイトの構成次第で変わってきます。

ですがご紹介したコードは、align-contentプロパティを理解するために役立つものです。

CSSを勉強中の方に参考にしてもらえたら幸いです。

参考文献:MDN web docs|align-contentプロパティ: フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。

プログラミング学習に迷ったら相談してみよう!
無料でカウンセリングを受けてみる
※売り込みは一切致しません プログラミングスクール無料カウンセリング