Question

我有一个4列的flexbox网格，用于显示产品。所有产品的宽度都是25％，但如果只有1个产品的宽度为75％，我怎么能确保网格不会断裂，这样我才能在一行上显示2个产品呢？

有没有办法，使用flexbox，提供更宽的75％网格项优先级，以便它自动调整/移动网格，以确保它不会像现在那样破坏？

jsFiddle （底部的代码）

这就是我想要实现的目标：

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

Answer 2

进行这种布局的一种相当简单的方法是通过CSS Grid模块。但是因为你已经要求它用于Flexbox;这是我的看法：

此处需要调整基于flexbox的网格的宽度（不完全是width属性，而是flex-basis）。使用flex-basis可以更轻松地调整flexbox-children的大小，因此我避免给他们width。

我在下面进行的调整是使用calc()，从每个(n-1)减去排水沟宽度的.grid__item次。

为什么（n-1）次？

我们一直给每个.grid__item一个左边距，并希望它不会崩溃。所以，我们连续折扣最后一个单元格。

/* Box-sizing reset */
*,
*:before,
*:after {
  box-sizing: border-box;
}

.flex-grid {
  max-width: 1120px;
  margin: 2em auto;
}

.grid-uniform {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
}

.grid__item {
  display: flex;
  /* Used `flex` instead of `width` */
  flex: 1 0 calc(25% - 60px); /* (4-1) * 20px = 60px
  /* Used `margin` instead of `padding` */
  margin: 0 0 20px 20px;
  position: relative;
  /* Gave it a size in order to make it look "uniform" */
  max-height: 350px;
}

.grid__item.featured-product {
  flex-basis: calc(75% - 60px); /* (4-1) * 20px = 60px */
}

.flex-content {
  /* Made the content take up the whole available width and hide bleed-outs, if any */
  width: 100%;
  overflow: hidden;
}

.grid__image img {
  /* Made the dummy images look okay */
  width: 100%;
  object-fit: cover;
  object-position: center;
}

<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>
    <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>
    <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>
    <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>
    <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>
    <a href="#" class="product grid__item featured-product">
      <div class="flex-content">
        <div class="grid__image">
          <img src="http://via.placeholder.com/550x350">
        </div>
        <div class="grid product-info">
          <p>
            This is a title
          </p>
        </div>
      </div>
    </a>
    <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>
    <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>

我希望它有所帮助。干杯！

具有多宽度列的Flexbox网格

2 个答案: