【CSS】たった3行で横並びしている上下位置を揃えます

今回はcssプロパティを組み合わせてできるcssの小技を紹介します。

今回やること

普段は横方向（水平方向）で使用することが多い、「justify-content」と「flex-flow」を用いた縦方向（垂直方向）での整列。

※前提として、上記2つのプロパティはFlexBox内で適用できるものとなっていますのでご注意ください。

この方法のメリット

FlexBoxで横に並んでいる子要素内の文字情報等が不均一でも縦方向（垂直方向）の始点・終点の位置が揃う
※FlexBoxを使用すると、FlexBox内の高さが列ごとに統一されることを利用しています。

何も指定しないと

このように背景色を見てもらえれば高さが統一されていることはわかりますが、文字量が違うと下にあるボタンの位置がばらばらになり、レイアウトとして決していいとは言えません。

指定してみる

そこで今回紹介する、「justify-content」と「flex-flow」の出番です。
説明の前に、とりあえず見てみましょう。

先程までばらばらだった終点の位置が統一がされていることがわかると思います。
これは子要素にFlexBoxを使用し、「flex-flow: column」で子要素内を垂直方向に、「justify-content:space-between;」で子要素内を始点と終点に配置することで実現できます。

追加したコード

/* 子要素のレイアウト */
.box {
 /*-------追加したコード------*/
 display: flex; /*--子要素内を横並びに--*/
 flex-flow: column; /*--子要素内を垂直方向に指定--*/
 justify-content: space-between; /*--子要素内を始点と終点に配置--*/
}

ポイント

今回のポイントは子要素内のアイテム数を”2つ”にすることです。
「justify-content:space-between;」では最初のアイテムが始点に、最後のアイテムが終点に配置されます。ただ、3つ以上にすると残りのアイテムは均等に配置されるので予期せぬ余白等が出てきてしまいます。 なので、それぞれ始点と終点にしたいアイテムをdiv等で囲むなどしてアイテム数を”2つ”にしましょう。

まとめ

・親要素にdisplay:flex;で子要素を横並びに
・子要素内をdisplay:flex;で横並びに
・子要素内をflex-flow: column;で垂直方向に
・子要素内をjustify-content: space-between;で始点と終点に
・子要素内のアイテムを2つにする