display: flex;などのFlexboxでalign-itemsプロパティを使用すると、主軸に交わる交差軸(クロス軸)方向の配置を指定する事が出来ます。
今回は、align-itemsプロパティの使い方から効かない原因について解説していきます。
主軸方向の配置については、justify-contentプロパティでFlexbox内の要素の配置を指定する方法と効かない原因【CSS】をご覧ください。
align-itemsプロパティとは
align-itemsプロパティはFlexbox内の主軸方向と交わる交差軸(クロス軸)方向の配置を指定できるプロパティです。通常は主軸が左から右の水平方向となるので、align-itemsプロパティは垂直方向の配置を指定となります。
基本的には下記コードのようにdisplay: flex;などのFlexboxの指定と同時に指定するプロパティとなります。
div {
display: flex;
align-items: center;
}上記例のように親要素に対して指定する事で、子要素が指定した方向に配置されます。(上記コードの場合は、垂直方向に中央寄せに配置)
基本的に主軸が水平(横)の場合は交差軸(クロス軸)は先頭が上側となりますが、主軸の向きを定義するflex-directionプロパティで主軸を垂直(縦)方向にした場合は先頭が左側となります。
align-itemsプロパティで指定できる値と使用例
align-itemsプロパティで指定出来る値と使用例は以下の通りです。
使用例のHTML・CSSは下記コードを共通で使用しています。(子要素には別途中央寄せなどのCSSを指定しています。)
<div class="flexbox">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>.flexbox {
display: flex;
gap: 20px;
}
.flexbox div {
flex: 1;
}
.item2 {
height: 100px;
}下記で解説する値の他にいくつかありますが、よく使用する値を解説していきます。
flex-start または start
交差軸方向に対して先頭に寄せる(垂直方向では上側)
.flexbox {
align-items: flex-start;
}flex-end または end
交差軸方向に対して末尾に寄せる(垂直方向では下側)
.flexbox {
align-items: flex-end;
}center
交差軸方向に対して中央に寄せる(垂直方向では中央寄せ)
.flexbox {
align-items: center;
}baseline
ベースラインに合わせる
.flexbox {
align-items: baseline;
}
.item2 {
font-size: 3.0rem;
}stretch または normal (初期値)
親要素に合わせて子要素を伸縮する(垂直方向では高さを親要素に合わせる)
.flexbox {
align-items: stretch;
}効かない原因について
align-itemsプロパティの指定が効かない原因としていくつかありますので、効かない場合は以下を確認してみてください。
display: flex;の指定を忘れている
align-itemsプロパティを指定している要素(親要素)にdisplay: flex;を指定しているか確認してみてください。
意外と効かない原因としては多いかと思います。
子要素にmarginプロパティが指定されている
子要素にmarginプロパティが指定されている場合は意図しない配置になる場合があります。marginプロパティの指定を見直してみてください。
align-items: stretch;が効かない
子要素に高さの指定(heightプロパティ)がされている可能性があります。
さいごに
いかがでしたでしょうか。
今回は、align-itemsプロパティでFlexbox内の要素の配置を指定する方法と効かない原因について解説しました。
Flexboxではよく使用するプロパティとなりますので、各値の特性を理解し使えるようになりましょう。
