ど真ん中に図や文字を表示させたい

【概要】

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 について、最初に子要素につけていたことによって 表示が反映されていませんでした。”親要素に適用する”という基本が抜けていました。