플렉스 및 플렉스 랩 랩이 작동하지 않습니까?

Question

display: flex; //Parent element 

및

flex-wrap: wrap; //Direct child elements 

각 그리드는 ..

를 컨테이너가 폭의 25 %를 입력하고 자동으로 가야하지만 현재 그들은 플렉스 랩처럼 행동하지 않습니다 포장; 그들은 5 % 격자 일 때 20 % 너비처럼 행동합니다 ... 25 %로 설정 되었기 때문에 좀 이상합니다.

내가 현재 display:flex;이있는 상위 요소에 Flex-wrap: wrap;을 넣었지만 그 높이가 같지 않습니까?

이 상황에서 나는 무엇을해야합니까? 여기 예제를이

할 찾는 방법을 알아낼 수 없습니다 : 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를 사용하여. 나는이 question

에 Michael_B하여이 대답을 인용으로 여러 줄 플렉스 용기 (단 하나의 라인도 하나)에서

플렉스 라인

을, 각 줄의 가로 크기는 (맞춤 self로 인한 정렬 후) 라인에 플렉스 항목을 포함하는 데 필요한 최소 크기이며, 줄은 align 내용 속성을 사용하여 플렉스 컨테이너 내에 정렬됩니다.

즉, 행 기반 플렉스 컨테이너에 여러 줄이있는 경우 각 줄의 높이 ("가로 크기")는 "줄의 플렉스 항목을 포함하는 데 필요한 최소 크기"입니다. .

당신이 자바 스크립트 대안을 찾고 있다면.

부모 요소에 대해

<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

(디스플레이와 하나가 : 플렉스) 당신은 추가해야합니다 : 여기 당신은 그냥 </body> 전에 추가 할 필요가 무엇 플렉스 포장 : 포장; align-items : stretch;

다음 안에는 두 가지 옵션이 있습니다. 두 번째 옵션은 입니다. 1. js로 div 가장 높은 높이를 계산하고 min-height : [top-height]를 모든 하위 div에 적용합니다. 2. 또는 최대 높이를 계산할 수있는 경우 - 최소 높이를 사용하여 CSS로 수행하십시오.

나는 flex-wrap과 다른 내용물을 가진 순수한 flexbox를 사용하여 99 %를 달성 할 방법이 없다고 확신합니다.