問題
13要素を中央に寄せてみよう
CSSでフレックスボックスを使って要素を中央に寄せる場合は、justify-contentとalign-itemsというプロパティを使用します。margin 0 autoやtext-alignとの違いをしっかり理解していきましょう。
CSSの問題に挑戦しよう！
問題
「要素を中央に寄せてみよう」
用意されている黒のボックスを青のボックスの中央に寄せてみましょう。
あらかじめエディタに書くコード
<div class="boxs">
<div class="box"></div>
</div>
¥HTML¥
.boxs {
width: 300px;
height: 300px;
background: blue;
display: flex;
}
.box {
width: 100px;
height: 100px;
background: black;
}
¥CSS¥
期待する画面
解答と解説（要素を中央に寄せてみよう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
要素を中央に持ってくるにはjustify-contentとalign-itemsを使用します。
「justify-content」は左右の間隔を揃えるプロパティ
「align-items」は上下の間隔を揃えるプロパティです。
今回は中央に寄せる問題だったので両方にcenterを指定しましたが、
値の種類には左に詰めて配置するflex-startや複数の要素を等間隔に空けるspace-around等が用意されています。
ポイント
justify-contentとは
justify-contentとは、flexアイテムの配置設定を行なうCSSのプロパティです。
フレックスボックス（display:flex）を指定した親要素に対する子要素のことをflexアイテムと呼びます。
すなわち、display:flexが指定されていない状態でjustify-contentを使って配置設定を行なうことはできません。
2つが揃わないと機能しないプロパティなのでセットで覚えておきましょう。
justify-contentプロパティの初期値は左寄せ（flex-start）になっており、指定できる値には、
flex-end（右寄せ）、center（中央寄せ）、space-between（flexアイテムの両端揃え）など他にもいくつかの配置を指定する値が用意されています。
justify-contentの余白は、主軸となる方向につけられます。display:flexを指定している場合、基本的には横方向が主軸となりますが、flex-direction（並ぶ方向を指定するプロパティ）が指定されいる場合などは縦が主軸になることもあります。
align-itemsとは
align-itemsとは、flexアイテムの縦軸の配置を調整するCSSのプロパティです。
上下のどこで揃えるのかを指定できます。
このプロパティもdisplay:flexが指定されていないと機能しませんので注意しましょう。
具体的な値には、flex-start（上揃え）、flex-end（下揃え）、center（中央揃え）などがあります。
他にも要素の伸縮やテキストの位置を基準とした指定も可能です。
大きさの違う画像を並べるときや、flexアイテムの中にテキストがあるときなど便利なので、使いこなせるようにしておきましょう。
