代码之家 › 专栏 › 技术社区 › calin24

使用等单元大小的flex响应网格

flexbox css3 css html

-2

calin24 · 技术社区 · 7 年前

我的HTML代码位于: jsfiddle 我想让所有的细胞都有反应。

这个例子很好,但是…我希望调整浏览器大小时所有单元格都相等。

在本例中,有5个单元格占据了所有容器(4个徽标和1个文本)。

最后两个单元格(第二行)不等于(整行有两个单元格)我希望与第一行的大小相同(这意味着:单元格单元格为空)。

这可以使用flex:1吗?

flex: 1

我希望我能把自己说清楚:)

1 回复 | 直到 7 年前

SirPilan 7 年前

您可以使用“幽灵元素”来执行此操作:

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