（CSS）フレックスボックスを使って、2カラムレイアウトと3カラムレイアウトをつくってみた！

2カラムレイアウト

WEBサイトでよくみる、メインとサイドバーのレイアウト（２カラムレイアウト）を作りましょう！

1. メイン部分とサイドバー部分をdivで囲い、class=”container”を設定します。
2. <div class=”container”></div>がflex Container（親要素）です。
3. メイン部分とサイドバー部分がflex-iItem（子要素）です。
4. サイドバー部分のwidthを固定して、メイン部分をflex:1;とします。
5. サイドバーは固定幅となり、メイン部分の幅は領域に合わせて、指定した比率で伸びたり、縮めたりする指定になりました。

3カラムレイアウト

WEBサイトでよくみる、メインとサイドバー、ナビのレイアウト（3カラムレイアウト）を作りましょう！

1. メイン部分とサイドバー部分、ナビ部分をdivで囲い、class=”container”を設定します。
2. <div class=”container”></div>がflex Container（親要素）です。
3. メイン部分とサイドバー部分、ナビ部分がflex-iItem（子要素）です。
4. サイドバー部分とナビ部分のwidthを固定して、メイン部分をflex:1;とします。
5. ナビ部分を左にするために、order: -1;とします。
6. サイドバーは固定幅となりました。
7. ナビ部分は固定幅となり、一番左へ配置されました。
8. メイン部分はサイドバー部分とナビ部分以外の領域で、伸び縮みするようになりました。