コンテナとアイテム

「.main-column」と名称を付けた class の <div> で全体のコンテンツを囲む。直下に「section」を 3 つ配置する。

「.main-column」に、「display: flex; flex-direction: row;」を設定する。これで「.main-column」はフレックスコンテンになり、各 section は、フレックスアイテムとなった。

flex: 1;

アイテムの「section」に「flex: 1;」を設定する。

各 section の中に <h1> と <p> を配置する。padding、margin、background-color を設定して配置バランスを整える。

とても簡単だ

フレックスボックスレイアウトが素晴らしいのは、たったこれだけの処理が済めば、立派なレイアウトを生成してくれる。例えば、横に並んだ「section」は中のコンテンツ、ここではテキストが長いものに背景色の高さを揃えてくれる。モバイルの縦では、テキストにフィットするように高さを自動調整して積み重ねてくれる。とても簡単だ。