Question

display: flex; //Parent element

和

flex-wrap: wrap; //Direct child elements

每个网格必须填充25％的容器宽度并自动下降..

但是目前它们的行为不像flex-wrap：wrap;当有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 Lines

在多线柔性容器（即使只有一条线的容器）中，   每行的交叉大小是包含该行所必需的最小大小   在线上弯曲项目（由于align-self对齐后），以及   线条在flex容器内与align-content对齐   属性。

换句话说，当基于行的flex中有多行时   容器，每条线的高度（＆＃34;十字尺寸＆＃34;）是最小值   在线上包含弹性项目所需的大小＆＃34;。

如果您正在寻找一个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

对于父元素（具有display：flex的元素）您需要添加： flex-wrap：wrap; align-items：stretch;

然后有尺寸无论你有什么内容你有两个选择： 1.使用js计算最高div高度，并将min-height：[top-height]应用于所有子div。 2.或者，如果你可以估计最大高度 - 只需使用min-height在css中进行。

我99％肯定没有办法使用带有柔性包装和不同内容的纯柔性盒来实现它。

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

2 个答案: