レイアウトと縦画面の条件設定

- CSSのコード-

      body {
        margin: 0 auto;
        width: 800px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        }
      header{
        height: 150px;
        }
      div{
        display: flex;
        flex: 1;
        }
      main{
        flex: 1;
        }
      nav{
        width: 150px;
        }
      aside{
        width: 250px;
        }
      footer{
        height: 200px;
        }
      @media screen and (max-width: 900px){ //横幅が900px以下になった場合の記述を{}内に書く
        body,nav,aside{
        width: 100%;
        }
       div{
       flex-direction: column;         //縦画面divにするにはbodyにもflex-direction: colum;
       }
       main{
       order: -1;  //順序グループに属するのかをorderプロパティで指定
       }
     }
/* https://github.com/lightsound/html-css-class
bodyの高さ100vhに固定しないで最低の高さを100vhにするにはmin-heightにする！
*  divタグに高さいっぱいflexを効かせたいが親要素がdisplay flexプロパテイがないと効かない
　横並びになってしまいました縦にするにはbodyにflex-direction: colum;をあてdivにflex:1;と
　当てる
* これで聖杯レイアウトをflexで簡単にできた
* 全画面幅でできたが今度は固定幅bodyに800pxとmargin 0 autoにしてみる
*/

/*スマホ画面を作る
*下の方に書く、横幅が900px以下になった場合の記述@media screen and (max-width: 900px){
*{}内に条件、bodyの上書き　body{width:100%;}と書くと800幅以下になると固定
 更にdivの中を縦方向の画面にするflex-direction:c colum;をあてる
 固定幅のleftとrightを100%にする
 navを下に移動して見やすい画面に　main{ order: -1; とする
 https://developer.mozilla.org/ja/docs/Web/CSS/order みると
 */