html - 具有多宽度列的 Flexbox 网格

Question

我有一个用于显示产品的 4 列 flexbox 网格。所有产品的宽度均为 25%，但如果只有 1 个产品的宽度为 75%，我如何才能确保网格不会中断，以便我可以在一行中显示 2 个产品？

有没有一种方法，使用 flexbox，给予更宽的 75% 的网格元素优先级，以便它自动调整/移动网格以确保它不会像现在那样中断？

jsFiddle (代码在底部)

https://jsfiddle.net/kdjkc15g/

这就是我要实现的目标:

CSS

.grid-uniform {
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}

.grid__item {
  width: 25%;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  padding-left: 20px;
  position: relative;
  margin-bottom: $gutter*2;
}

.grid__item.featured-product {
  width: 75%;
}

HTML

<div class="flex-grid">
 <div class="grid-uniform">
  <a href="#" class="product grid__item">
    <div class="flex-content">
      <div class="grid__image">
      <img src="http://via.placeholder.com/250x350">
      </div>
      <div class="grid product-info">
      <p>
      This is a title
      </p>
      </div>
    </div>
  </a>
  ...
 </div>
</div>

Answer 1

为此编辑您的 CSS。它现在完全响应。

CSS

* {box-sizing: border-box;}
.flex-grid {
  overflow: hidden;
  padding: 0;
}

.grid-uniform {
  display: flex; display: -webkit-flex;
  flex-wrap:wrap; -webkit-flex-wrap: wrap;
}

.grid__item {
  flex-grow: 1; -webkit-flex-grow: 1;
  flex-basis: 25%;
}

.grid__item.featured-product {
  flex-basis: 50%;
}

.grid__image {
  background:#f4f4f4;
  padding-top:$gutter;
  padding-bottom:$gutter;
  overflow: hidden;
}

链接到 fiddle