css - Flex-box布局使无拉伸(stretch)原始

Question

是否可以使来自数据库的动态内容在包装原始文件时不在高度上拉伸(stretch)。这是我取得的成就。

.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

当你说“不要在高度上拉伸(stretch)”时，不太清楚你的意思

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

<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/