當我將元素設置爲堆疊在一起（塊）時，爲什麼我的柔性盒元素會「浮動」在一起？

我有一組元素，當頁面是特定寬度時，我想切換顯示順序（320px）。他們確實改變了秩序，但我無法弄清楚爲什麼元素是「浮動」的，而不是堆疊。（「浮」在引號，因爲我知道它不是真正的浮動所以我想...。）當我將元素設置爲堆疊在一起（塊）時，爲什麼我的柔性盒元素會「浮動」在一起？

我有以下HTML：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style type="text/css"> 
     /* Elements */ 
     html, body, div, form, fieldset, legend, label{ 
      margin: 0; 
      padding: 0; 
     } 
     body{ margin:0; padding:0; line-height:1; font-family:Arial, Helvetica, sans-serif; } 
     table{ 
      border-collapse: collapse; 
      border-spacing: 0; 
     } 
     th, td{ 
      text-align: left; 
      vertical-align: top; 
     } 
     ul, li{padding: 0; margin:0;} 
     h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; margin: 0 0 16px; } 
     img { border: 0; } 
     p{ margin: 0 0 16px; } 
     a{} 

     /* Forms */ 
     fieldset{ border:none; } 
     input:focus, select:focus, textarea:focus{ outline: 1px solid #ccc; } 
     textarea{ overflow: auto; } 

     /* Utility */ 
     .error{color: #f00; } 
     .left{float: left; } 
     .right{float: right; } 
     .clear{clear: both; } 
     .hide{display: none; } 


     *{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 
     nav{ 
      background: #f00; 
     } 
     nav:after { 
      content: "."; 
      display: block; 
      height: 0; 
      clear: both; 
      visibility: hidden; 
     } 
     nav ul li{ 
      list-style: none; 
      margin: 0 auto; 
      text-align: center; 
      float: left; 
     } 



     @media screen and (max-width: 320px){ 
      nav{max-width: 100%;} 
      nav ul { 
       width: 100%; 
       display: -webkit-box; 
       display: -moz-box; 
       display: -ms-flexbox; 
       display: -webkit-flex; 
       display: flex; 
      } 
      nav ul li{ 
       -webkit-box-flex: 1; 
       -moz-box-flex: 1; 
       -webkit-flex: 1; 
       -ms-flex: 1; 
       flex: 1; 
       display: block; 
       float: none; 
      } 
      nav .home{ 
       -webkit-box-ordinal-group: 1; 
        -moz-box-ordinal-group: 1;  
        -ms-flex-order: 1;  
        -webkit-order: 1; 
        order: 1; 
      } 
      nav .projects, nav .services{ 
       -webkit-box-ordinal-group: 2; 
        -moz-box-ordinal-group: 2;  
        -ms-flex-order: 2;  
        -webkit-order: 2; 
        order: 2; 
      } 
      nav .about, nav .contact{ 
       -webkit-box-ordinal-group: 3; 
        -moz-box-ordinal-group: 3;  
        -ms-flex-order: 3;  
        -webkit-order: 3; 
        order: 3; 
      } 
     } 
    </style> 
</head> 
<body> 
    <header> 
     <nav> 
      <ul> 
       <li class="projects">Projects</li> 
       <li class="services">Services</li> 
       <li class="home">Home</li> 
       <li class="about">About</li> 
       <li class="contact">Contact</li> 
      </ul> 
     </nav> 
    </header> 

    <section> 

    </section> 

    <footer> 

    </footer> 
</body> 
</html>

和測試fiddle。

任何人都可以告訴我爲什麼Flex-box父項裏面的元素是相互浮動的，而不是堆疊？謝謝您的幫助！

來源

2013-05-11 Fillip Peyton

想通了。未將column的flex-direction財產分配給柔性箱式容器。

更新了fiddle。

來源

2013-05-11 04:06:19

也許你可以添加：

flex-direction: column;

在媒體查詢。

到這裏看看：http://jsfiddle.net/ChX8J/4/

來源

2014-04-07 10:47:13 Marconi

感謝@Marconi，但我已經找到了答案了。請參閱：http://stackoverflow.com/questions/16493386/why-does-my-flex-box-elements-float-next-to-each-other-when-ive-set-its-eleme/22910206#answer- 16493642 – 2014-04-07 21:36:59

當我將元素設置爲堆疊在一起（塊）時，爲什麼我的柔性盒元素會「浮動」在一起？

回答

相關問題