Flex和Flex-wrap包裝不起作用？

Question

display: flex; //Parent element 

和

flex-wrap: wrap; //Direct child elements 

每個網格都有填寫的容器寬度的25％，並自動走下來..

，但目前他們並不像柔性包裝：包裝;當有5個網格時，它們的行爲就像是20％的寬度......它有點奇怪，因爲它們設置爲25％？

如果我把Flex-wrap: wrap;放在父元素上，我現在有display:flex;它可以工作，但它們不是等高嗎？

在這種情況下我該怎麼辦？我想不出如何執行此操作，

找到實例：http://www.chri126g.wigf1.sde.dk/DUER1/

HTML

<div class="global-wrapper"> 

<div class="dueWrapper flex"> 

    <div class="dueOuter col25 flex-w-w"> 
    <div class="dueInner flex-d-r"> 
     <img src="img/salg/1.jpg" alt="due"> 
     <table> 
     <tr> 
      <td>Navn</td> 
      <td>Smith</td> 
     </tr> 
     <tr> 
      <td>Far</td> 
      <td>Jackson</td> 
     </tr> 
     <tr> 
      <td>Mor</td> 
      <td>Emelie</td> 
     </tr> 
     <tr> 
      <td>Pris</td> 
      <td>500kr</td> 
     </tr> 
     </table> 
    </div> 
    </div> 

    <div class="dueOuter col25 flex-w-w"> 
    <div class="dueInner flex-d-r"> 
     <img src="img/salg/2.jpg" alt="due"> 

    </div> 
    </div> 

    <div class="dueOuter col25 flex-w-w"> 
    <div class="dueInner flex-d-r"> 
     <img src="img/salg/3.jpg" alt="due"> 

    </div> 
    </div> 

    <div class="dueOuter col25 flex-w-w"> 
    <div class="dueInner flex-d-r"> 
     <img src="img/salg/3.jpg" alt="due"> 

    </div> 
    </div> 

    <div class="dueOuter col25 flex-w-w"> 
    <div class="dueInner flex-d-r"> 
     <img src="img/salg/3.jpg" alt="due"> 

    </div> 
    </div> 

</div><!--/DUE-WRAPPER--> 
</div><!--/GLOBAL-WRAPPER--> 
CSS 

.flex { 
    display: flex; 
} 
.flex1{ 
    flex: 1; 
} 
.flex-d-r{ 
    display: flex; 
    flex-direction: column; 
} 
.flex-w-w{ 
    display: flex; 
    flex-wrap: wrap; 
} 
body{ 
    background-color: lightgrey; 
} 
.global-wrapper{ 
    padding: 5px; 
    width: 90%; 
    min-height: 100vh; 
    max-width: 1000px; 
    margin: 0 auto; 
    background-color: #fff; 
} 

.dueOuter{ 
    padding: 5px; 
} 

.dueInner{ 
    outline: 1px solid #000; 
    min-height: 100px; 
    transition: 0.3s ease; 
    -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75); 
    -webkit-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75); 
    box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.75); 
} 

.dueInner:hover{ 
    b: 3px solid #000; 
} 
.dueInner img{ 
    width: 100%; 
} 
td{ 
    width: 100%; 
} 
tr:nth-of-type(odd){ 
    background-color: lightgrey; 
} 

Answer 1

你不能這樣做，使用Flexbox的。正如我通過Michael_B在此question

引用此答案

彎曲線

在多線柔性容器（甚至僅與單個線）， 每條線的交叉尺寸是包含線上的 彈性項目所需的最小尺寸（由於自對齊而進行對齊後）以及 線條與對齊內容 屬性在柔性容器內對齊。

換句話說，當在一個基於行的flex容器中有多個行時，每行的高度（「cross size」）是「包含行上flex項目所需的最小大小 」 。

如果您正在尋找JavaScript的替代品。下面是你需要添加之前</body>什麼：

<script type="text/javascript"> 
    var SdueOuter = document.querySelectorAll(".dueOuter"); 
    var maxHeight = 0; 
    for(i=0;i<SdueOuter.length;i++){ 
    if(SdueOuter[i]){ 
    var currentHeight = SdueOuter[i].offsetHeight; 
    if(currentHeight>=maxHeight){ 
     maxHeight = currentHeight; 
     } 
    } 
    else{ 
     break; 
    } 
    } 
    for(i=0;i<SdueOuter.length;i++){ 
    SdueOuter[i].style.height = maxHeight+"px"; 
    } 
</script> 

Answer 2

父元素（一個帶顯示：彎曲），您需要添加： 柔性包裝：包裝; align-items：stretch;

然後有大小無論你在裏面有什麼內容有兩個選項： 1.用js計算最高的div高度，並對所有的小孩div應用min-height：[top-height]。 2.或者如果您可以估計最大高度 - 只需在css中使用最小高度來完成。

我99％肯定沒有辦法使用flex-wrap和不同內容的純flexbox來實現它。