【図解】ちゃんと理解するフレックスボックス【CSS】 - Qiita

はじめに CSSによるページレイアウト Webページのレイアウトを作るとき、要素の位置を操作するCSSはいくつかあります。 代表的なものとしては下記です。 通常フロー フレックスボックス グリッド フロート（ほとんど使わない） 位置指定（position） 表レイアウト(table) など 通常フロー CSSが何も適用していない場合、Webページ上の要素はもともとHTMLが持つルールで表示されます。 ブロックレベル要素のコンテンツは、親要素の幅の100%で、高さがコンテンツに準じます。 インライン要素は、コンテンツと同じ幅・高さを持ちます。 視覚的にみると以下のような感じです。