柔性盒布局使得无拉伸原始

Question

是否可以从数据库中生成 动态 内容，而不是在包装原始数据时拉伸高度。这就是我所取得的成就。

.main-raw {
  width: 250px;
  height: 100%;
   display: -webkit-flex;
   display: flex;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-flex-direction: row;
   flex-direction: row;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;
   -webkit-align-content: flex-end;
   align-content: flex-end;
}
 
.item-1, .item-2, .item-3  {
  width: 100px;
  margin: 3px;
  background-color: black;
}

.item-1 {
  height: 100px;
}

.item-2 {
  height: 200px;
}

.item-3 {
  height: 150px;
}

<div class='main-raw'>
  <div class='item-1'>&nbsp</div>
  <div class='item-2'>&nbsp</div>  
  <div class='item-3'>&nbsp</div> 
</div>

以下是我要找的内容：

Answer 1

当你说“没有伸展身高”时，你的意思并不太确定

但我在自己的包装器中包含了元素，以便正确定位它们。

<div class='main-raw'>

  <div class="first-row">
    <div class='item item-1'>&nbsp</div>
    <div class='item item-2'>&nbsp</div>
  </div>

  <div class="second-row">
    <div class='item item-3'>&nbsp</div> 
    <div class='item item-4'>&nbsp</div> 
  </div>

  <div class="third-row">
    <div class='item item-5'>&nbsp</div> 
    <div class='item item-6'>&nbsp</div> 
  </div>

</div>

这是一个例子：

https://jsfiddle.net/ax0mfc0p/2/