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プロパティの設定に使う、フレックスボックスの生成や要素を折り返しについて解説していきます。
|
1 2 3 4 5 6 7 8 9 10 11 |
.flex-box { display:flex; flex-wrap:wrap; align-content:flex-start; width:300px; height:200px; background-color:#eee8aa; list-style-type:none; margin:0; padding:0; } |
上記のコードで、displayプロパティにflexという値を指定することで、フレックスボックスを生成できます。
フレックスボックス生成をしたら要素を折り返しの設定をしていきます。要素を折り返すには、flex-wrapプロパティを使い、値にwrapを指定します。
フレックスボックスを生成しても、要素を折り返す設定がないと、align-contentプロパティで指定する「flex-start」が使えません。
しかしflex-wrapプロパティで要素を折り返させるには、フレックスボックスの範囲を指定する以下の2つのプロパティが必要になります。
・heightプロパティ：高さの指定に使う
幅と高さを指定すると、フレックスボックスの範囲を決められます。
「.flex-box」で、align-contentプロパティを使うのに役割が大きいプロパティは、
|
1 2 3 4 |
display:flex; flex-wrap:wrap; width:300px; height:200px; |
の4つになります。
「.flex-box」内の4つのプロパティ以外のプロパティも、フレックスボックスの配置や背景色、リストのマーカーを消すといった設定に使っています。
それぞれのプロパティがどのように機能するか、ご紹介したコードを参考に記述して確かめてください。
フレックスボックス内の要素を作る設定
「align-contentプロパティの使い方」のコードで、フレックスボックス内の要素を設定の仕方を見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 |
.flex-box a{ display:block; margin:3px; padding:10px; font-size:10px; background-color:#4169e1; color:#ffffff; text-align:center; text-decoration:none; } |
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つのプロパティが必要です。
|
1 2 3 |
display:block; padding:10px; font-size:10px; |
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プロパティ: フレックスボックスの交差軸またはグリッドのブロック軸方向の内部のアイテムの間または周囲の間隔の配分方法を設定します。
