CSS
LINEでログイン
Googleでログイン
Twitterでログイン
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アイテムの中にテキストがあるときなど便利なので、使いこなせるようにしておきましょう。
CSSの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。
問題13：要素を中央に寄せてみよう
用意されている黒のボックスを青のボックスの中央に寄せてみましょう。
あらかじめエディタに書くコード
<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¥
期待する画面
解答ソースコード
.boxs {
width: 300px;
height: 300px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
}
¥CSS¥
完了にする！
活動記録をTweetする
「justify-content」は左右の間隔を揃えるプロパティ
「align-items」は上下の間隔を揃えるプロパティです。
今回は中央に寄せる問題だったので両方にcenterを指定しましたが、
値の種類には左に詰めて配置するflex-startや複数の要素を等間隔に空けるspace-around等が用意されています。