使用单元格大小相等的flex的自适应网格

Question

我在以下位置有此html代码： jsfiddle，我想让所有单元格都具有响应能力。

此示例工作正常，但是....我希望在调整浏览器大小时所有单元格都相等。

在此示例中，有5个单元格占据了所有contaier（4个徽标和1个文本）。

最后2个单元（第二行）不等于（2个单元占据了整行）。我希望与第一行的大小相同（这意味着：单元格为empty_space）。

使用flex：1是否可能？

flex: 1

我希望我能表明自己的意思：）

Answer 1

您可以使用“鬼元素”来做到这一点：

.cardHolder {
    display: flex;
    flex-flow: row wrap;
}

.wrap {
  flex: 1;
  min-width: 200px;
}

.card {
    margin: .5em;
    min-width: 200px;
    height: 112px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all .25s ease;
    animation: populate .5s ease-out normal backwards;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card img {
  max-height: 95px;
}
.card:hover {
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="cardHolder">
  
  <div class="wrap">
    <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
    </div>
  </div>
  
  <div class="wrap">
    <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
    </div>
  </div>
  
  <div class="wrap">
    <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
    </div>
  </div>
  
  <div class="wrap">
    <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
    </div>
  </div>
  
  <div class="wrap">
    <div class="card">    
      <a href=""> WorkDay </a>
    </div>
  </div>
  
  <div class="wrap"></div>
  <div class="wrap"></div>
  <div class="wrap"></div>
 
</div>

原始，无需弯曲：）

.cardHolder {
}

.card {
    float: left;
    margin: .5em;
    height: 112px;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: all .25s ease;
    animation: populate .5s ease-out normal backwards;
    display: block;
    align-items: center;
    justify-content: center;
    width: calc(100% * (1/3) - 1em);
}

.card img {
  max-height: 95px;
}
.card:hover {
    transform: scale(1.05);
    z-index: 1;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="cardHolder">
  
  <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
  </div>
  
  <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
  </div>
  
  <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
  </div>
  
  <div class="card">    
      <a href=""><img class="img-responsive" src="https://www.bitc.ie/wp-content/uploads/2016/07/workday-200x112.jpg"></a>    
  </div>
  
  <div class="card">
    <div class="int-card">
      <a href=""> WorkDay </a>
    </div>
  </div>
  
</div>