解説サイトを読んでも、実際flexboxだけでどんなサイトになるのか想像しにくかったので、解説サイトを参考にしてflexboxだけで企業サイト風の配置に仕上げてみました。その0(headerにあたる部分) とメインコンテンツ部分その1～4 footer部分と　６つのブロックに分けてflexboxを用いています。画面の横幅800～1400pxの範囲においてflexになるように制限しています。

その1　↓ノーマル仕様　親要素にdisplay:flex;としただけ

Column 1

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

Column 2

さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ

Column 3

かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ

その2　↓1つめ子要素のみ1.5倍のサイズに指定

Column 2-1

さしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそさしすせそ

Column 2-2

あいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえおあいうえお

Column 2-3

Column 2-4

なにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねのなにぬねの

Column 2-5

たちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてとたちつてと

その3　↓親要素にflex-wrap:wrap;を指定。各子要素のwidthをwidth:calc(25% - 50px);と計算式で指定

Column 3-1

Column 3-2

Column 3-3

Column 3-4

Column 3-5

Column 3-6

はひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほはひふへほ

Column 3-7

まみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめもまみむめも

Column 3-8

やゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよやゆよ

その4　↓左を固定に右を可変にして右の中にさらにflexboxを入れています。

その0　↑親要素にdisplay:flex; justify-content:space-between;　最初の子要素にmargin-right: auto;としました。

その1　↓ノーマル仕様　親要素にdisplay:flex;としただけ

Column 1

Column 2

Column 3

その2　↓1つめ子要素のみ1.5倍のサイズに指定

Column 2-1

Column 2-2

Column 2-3

Column 2-4

Column 2-5

その3　↓親要素にflex-wrap:wrap;を指定。各子要素のwidthをwidth:calc(25% - 50px);と計算式で指定

Column 3-1

Column 3-2

Column 3-3

Column 3-4

Column 3-5

Column 3-6

Column 3-7

Column 3-8

その4　↓左を固定に右を可変にして右の中にさらにflexboxを入れています。

left-side (横幅固定)

main-contents (横幅可変)

Column 5-2

Column 5-3

Column 5-4

footer部分　↓その0とほぼ同じです。

その0 ↑親要素にdisplay:flex; justify-content:space-between; 最初の子要素にmargin-right: auto;としました。

その1 ↓ノーマル仕様 親要素にdisplay:flex;としただけ

Column 1

Column 2

Column 3

その2 ↓1つめ子要素のみ1.5倍のサイズに指定

Column 2-1

Column 2-2

Column 2-3

Column 2-4

Column 2-5

その3 ↓親要素にflex-wrap:wrap;を指定。各子要素のwidthをwidth:calc(25% - 50px);と計算式で指定

Column 3-1

Column 3-2

Column 3-3

Column 3-4

Column 3-5

Column 3-6

Column 3-7

Column 3-8

その4 ↓左を固定に右を可変にして右の中にさらにflexboxを入れています。

left-side (横幅固定)

main-contents (横幅可変)

Column 5-2

Column 5-3

Column 5-4

footer部分 ↓その0とほぼ同じです。

その0　↑親要素にdisplay:flex; justify-content:space-between;　最初の子要素にmargin-right: auto;としました。

その1　↓ノーマル仕様　親要素にdisplay:flex;としただけ

その2　↓1つめ子要素のみ1.5倍のサイズに指定

その3　↓親要素にflex-wrap:wrap;を指定。各子要素のwidthをwidth:calc(25% - 50px);と計算式で指定

その4　↓左を固定に右を可変にして右の中にさらにflexboxを入れています。

footer部分　↓その0とほぼ同じです。