如何使用Flex-box來響應元素佈局？

我有一個容器和2列的代碼，其中一個擁有1/3的總大小和其他2/3。我使用flex屬性將容器大小調整爲1024px的寬度和中心元素，但我失去了響應式佈局。如何使用Flex-box來響應元素佈局？

我可以在柔性盒模型上使用寬度爲1024px且居中的容器，有2個子列，其中一個佔總大小的1/3，另一個佔2/3，並且仍然有響應？我需要一些示例代碼。我的代碼是：

<HEAD> 
     <STYLE> 
      body { 
       display: -webkit-box; 
       display: -moz-box; 
       display: -ms-flexbox; 
       display: -webkit-flex; 
       display: flex; 

       -webkit-flex-flow: column wrap; 
      } 

      header { 
       order:1; 
      } 

      section{ 
       flex: 3 auto; 
       order: 1; 
      } 

      aside { 
       flex: 1 auto; 
       order: 2; 
      } 
      footer{ 
       order: 3; 
      } 

      #main{ 
       display: -webkit-box; 
       display: -moz-box; 
       display: -ms-flexbox; 
       display: -webkit-flex; 
       display: flex; 

       order: 2; 
       -webkit-flex-flow: row wrap; 
      } 

      #iSearch{ 
       width:100%; 
      } 
     </STYLE> 
    </HEAD> 
    <BODY> 
     <header style="background-color:blue;"> 
      <input id="iSearch" type="search" placeholder="search" /> 
     </header> 
     <div id="main"> 
      <section style="background-color:red;"> 
       ARTICLES 
      </section> 
      <aside style="background-color:green;"> 
      MENU LATERAL 
      </aside> 
     </div> 
     <footer style="background-color:yellow;"> 
      copyright 2014 
     </footer> 
    </BODY>

謝謝。

來源

2014-02-21 Jean Toledo

我解決問題與容器樣式此代碼：

最大寬度：1000像素; margin：auto;

謝謝你們。

來源

2014-02-21 02:07:37

如何使用Flex-box來響應元素佈局？

回答

相關問題