Flex布局實例1：典型三欄布局

<!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
       .container{
              display: flex;
              flex-flow: row wrap;
              font-weight: bold;
              text-align: center;
       }
       .container > *{
              padding:10px;
              flex:1 100%;
       }
       .header{
              background-color:tomato;
       }
       .footer{
              background-color:lightgreen;
       }
       .main{
              text-align:left;
              background-color:deepskyblue;
       }
       .aside-1{
              background-color:gold;
       }
       .aside-2{
              background-color:hotpink;
       }
       @media all and(min-width:600px){
           .aside{
               flex:1 auto;
              }
       }
       @media all and(min-width:800px){
           .main{
              flex:2 0px;
      }
          .main{
              order:2;
      }
          .aside-1{
             order:1;
      }
          .aside-2{
             order:3;
      }
        .footer{
             order:4;
      }
 }
        </style>
    </head>
    <body>
       <div class="container">
          <header class="header">Header</header>
              <article class="main">
                 <p>
                Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
                 </p>
              </article>
          <aside class="aside aside-1">Aside-1</aside>
          <aside class="aside aside-2">Aside-2</aside>
          <footer class="footer">Footer<footer>
       </div>
    </body>
    </html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容