【概要】
1.結論
2.display:flexとalign-items/justify-content とは何か
3.どういう時に使うのか
4.ここから学んだこと
1.結論
”display:flex”と”align-items”と”justify-content”は親要素に3点セットで使用する！
2.display:flexとalign-items/justify-content とは何か
i)display:flex➡︎”指定した要素の子要素”をFlexboxを適用させるためのプロパティです。そして、子要素が横並びになります。Flexboxとは柔軟にレイアウトを組める仕組みです！他にもdisplay:block(指定のセレクタをブロック要素に変更）などがあります。に
ii)align-items➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の水平方向の配置を決めれます。justyfy-content:center(中央）,justyfy-content:space-between(両端が左右寄り)などがあります。
iii)justify-content➡︎display:flexと併用して使うことが多く、”指定した要素の子要素”の垂直方向の配置を決めることができます。
align-items:felx-start(上),align-items:center(中央)などがあります。
3.どういう時に使うのか
実はこの3点セットでよく使うパターンが決まっております。ど真ん中に配置させたい時（水平方向・垂直方向・そして横並びに整列させたい）はdisplay:flexとalign-itemsとjustify-contentを親要素に3点セットで使用します！
下記に使用例を載せておきます！
.center_of_center{display:flex;align-items:center;justify-content:center;}上記のようにすると、画面中央に横並びになった状態でHTMLに反映され画面に表示されます！
*子要素の並び順を変えたい・縦列にしたい場合は親要素に”flex-direction”です。
display:flexはフレックスボックスを適用させるものなので、同時に使用します。
4.ここから学んだこと
align-items/justify-content について、最初に子要素につけていたことによって
表示が反映されていませんでした。”親要素に適用する”という基本が抜けていました。
