垂直方向の配置【flex-box】

今回の記事ではflex-boxで横並びにした垂直方向（通常は縦）の配置について紹介いたします。

display:flex;で指定した親要素に対して、align-items: 〇〇;と指定します。

○○の部分に値を入れます。

初期値【stretch】

align-items:stretch;

こちらは初期値になります。

全ての子要素の高さが揃って表示されます。

align-items:flex-start;

こちらは上に揃います。

align-items:center;

こちらは上下の真ん中に表示されます。

子要素が1つでも、上下中央寄せにしたい時などにも使えます。

align-items: flex-end;

これは下に揃います。

あまり使うことが多くはないと思いますが、初期値のstrechで子要素の高さが揃っていることを覚えておけば、変えたい時にすぐに対応できると思います。