ロゴを作って学ぼうCSS3 Flexbox入門 - Qiita

<main> <div id="windowsLogo"> <div></div> <div></div> <div></div> <div></div> </div> </main> CSSの設定 上記のHTMLにCSSでスタイルを設定してWindowsロゴを作成します。 1. 仮スタイルの設定 4つの長方形にボーダーを使って仮のスタイルを当てておきます。また、親要素である<div id="windowsLogo"></div>を上下中央揃えにし、ボーダーを設定しておきます（参考：たった4行！ CSS3 Flexboxを使った史上最短の上下中央揃え2016年版）。 /* main要素を上下中央揃えするための設定 */ html, body, main { height: 100%; } main { display: flex; justify-content: center; alig