display:flexについてですが、これはflexboxコンテナーというflexboxモデルを使用するために必要になる定義です。flexboxモデルはレスポンシブデザインを組むときやWEBアプリといった画面サイズに順応したフレーム作りをするために開発されたもので、画面位置やサイズを正しく設定するのが難しいフロートへの依存を軽減できます。指定の仕方は至って簡単で要素にdisplay:flexとしてやるだけ。これで指定された要素はflexboxコンテナーへと早変わりします。flexboxコンテナーの子要素は自動的にflexboxモデルの恩恵を受けられるflexboxアイテムとなります。flexboxコンテナーで指定できるプロパティーには配置の方向や順番、垂直方向への揃えなど様々なものがありますが、今回使用するのは水平方向への揃えを指定する「justify-content」です。簡単にいうとflexboxアイテムを水平方向のどの位置に指定するかというもので、今回のように左右均等に配置したい時(つまり中央揃えにする時)はjustify-content:centerとします。実際に表示してみましょう。左右均等にするだけではなくflexboxコンテナーを知っていると色んな配置に簡単に指定することが出来るので是非使いまくりたいですね。これでfloatからおさらばです!!flexboxプロパティーについてはこちらで詳しく紹介されていますので是非ご覧ください。