flexboxでページ全体のレイアウトを作ってみる

flexboxで超シンプルなページ全体のレイアウトを作ってみます。
フレームワークもよいけど、flexboxで作ってしまえば、HTMLもシンプル＆キレイ🙆
個人的にフレームワークを使うと、HTMLがどんどん煩雑になっていくのが気になるので、オリジナルのデザインからコーディングをしていくときはフレームワーク使わない派です。

👉 fle xboxの基本はこちら

よくあるWebページのレイアウト例A

上にヘッダーがある、定番のレイアウト。

定番のレイアウトです。
HTMLは以下の通り、超シンプルです。

<body>
  <div class="wrap">
    <header>header</header>
    <main>main</main>
    <aside>sidebar</aside>
    <footer>footer</footer>
  </div>
</body>

ページ全体をflex containerにしてしまう作戦です。
全体を囲んでしまえば途中に余分な<div>を挟むことなくHTMLがスッキリします。

.wrapの直下の要素が全部flex-itemになるので、あとは直下のheaderやmainなどの要素の幅を指定して、段落ちさせていけばOKです💡
今回はメインを70%、サイドバーを30％で、ヘッダーとフッターを100%にしています。
スマホ用には、全てのflex-itemの幅を100%にするだけで1レイアウトの完成👇

.wrap{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
 }
 header,main,aside,footer{
   padding:100px 0;
 }
 header{
   width:100%;
   background:#f0eeeb;
 }
 main{
   width:70%;
   background:#e3e3e3;
 }
 aside{
   width:30%;
   background:#c9c9c9;
 }
 footer{
   width:100%;
   background:#afafaf;
 }
 /*500pxより小さくなったら1カラム表示*/
 @media (max-width:500px){
   header,main,aside,footer{
     width:100%;
   }
 }

Demo

よくあるWebページのレイアウト例B

こちらも定番のレイアウト。ナビゲーションなどのコンテンツを右側に配置するタイプ。

HTMはさっきのものとほぼ同じです👇

<body>
  <div class="wrap">
    <header>header</header>
    <main>main</main>
    <footer>footer</footer>
  </div>
</body>

CSSもさっきとほとんど一緒ですが、今回はheaderを30%、mainを70%にしています。

.wrap{
   display:flex;
   flex-wrap:wrap;
   justify-content:space-between;
 }
 header,main,aside,footer{
   padding:100px 0;
 }
 header{
   width:30%;
   background:#f0eeeb;
 }
 main{
   width:70%;
   background:#e3e3e3;
 }
 footer{
   width:100%;
   background:#afafaf;
 }
 /500pxより小さくなったら1カラム表示/
 @media (max-width:500px){
   header,main,aside,footer{
     width:100%;
   }
 }

Demo

あとは、headerやmainの中にコンテンツを配置していけば、ページが完成💡

👉 fl exbox で色々なナビゲーションをつくる
👉 flexbox でボックスがタイル状に並んだレイアウトをつくる