Flexbox/Grid CSS的最大行数

Question

我的目标是在一个2-4行的网格中显示4-8个方框。 http://jsfiddle.net/vbf0379s/

.twit-container {
  display: flex;
  flex-wrap: wrap;
  padding: 5%;
  margin:-10px 0 0 -10px;
  position: relative;
}
.twit {
  max-width: 200px;
  display: inline-block;
  padding: 20px;
  width: 150px;
  min-height: 100px;
  margin: 10px 0 0 1%;
  background-color: #fff;
  border: 1px solid #ccc;
  flex-grow: 1;
  outline: 2px solid blue;
}

以下是使用网格布局的同样内容：

http://jsfiddle.net/03g27end/

方框应该扩展以填充可用空间，而不会被严格控制大小。但是，每当我尝试时，如果屏幕空间不足以容纳偶数个项目，则最后一行的项目会变形。

想要实现的是类似于 YouTube 的效果：

如果只有足够的空间放置3列，则不想显示最后一行。在弹性盒子示例中，项目会以不美观的方式膨胀，而在网格中它们只是悬挂在那里。

是否可以仅使用弹性盒子/网格或其他方法而无需媒体查询来实现此功能，还是必须根据屏幕大小进行计算？

- Harry

---

可能是重复的问题：https://dev59.com/IFcP5IYBdhLWcg3wl7CY - Temani Afif

@TemaniAfif 没错，谢谢你。我修改了我的问题，使其与那个问题更加不同。 - Harry

Answer 1

如果您同时使用 grid-template-rows、grid-auto-rows 和 overflow-hidden，您就可以隐藏隐含创建的行。

* {
  box-sizing: border-box;
}

.twit-container {
  background: teal;
  padding: calc(5% - 10px);
}

.twit-container-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-template-rows: auto auto;
  grid-auto-rows: 0px;
  position: relative;
  overflow: hidden;
}

.twit {
  display: inline-block;
  padding: 20px;
  width: 150px;
  min-height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  outline: 2px solid blue;
  margin: 10px;
}

<main class="twit-container">
  <div class="twit-container-inner">


    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          Sitting in web dev... This class is so awesome!
        </p>
        <p class="twit-text">
          Para 2!
        </p>
        <p class="twit-text">
          Sitting in web dev... This class is so awesome!
        </p>
        <p class="twit-attribution">
          <a href="#">CSMajor2017</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">BeaverBeliever</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">NewtonRulez</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          Huh?
        </p>
        <p class="twit-attribution">
          <a href="#">ConfusedTweeterer</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">Setup</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">Punchline</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">Hess</a>
        </p>
      </div>
    </article>

    <article class="twit">
      <div class="twit-icon">
        <i class="fa fa-bullhorn"></i>
      </div>
      <div class="twit-content">
        <p class="twit-text">
          text
        </p>
        <p class="twit-attribution">
          <a href="#">TheIRS</a>
        </p>
      </div>
    </article>
  </div>
</main>

- sol

---

谢谢。然而，当我尝试使用“gap”时，会出现问题。它会使重叠的行在网格容器底部变得可见且堆积。 - Garavani

Answer 2

您可以使用flex属性在一行中简单设置flex-shrink、flex-grow和flex-basis属性，例如：

flex: 1 1 200px; /* flex-grow:1; flex-shrink:1; flex-basis:200px;*/`

例子

.twit-container {
  display: flex;
  flex-wrap: wrap;
  padding: 5%;
  margin: -10px 0 0 -10px;
  position: relative;
}

.twit {
  flex: 1 1 240px;
  padding: 15px;
  width: 120px;
  min-height: 100px;
  margin: 10px 0 0 1%;
  background-color: #fff;
  border: 1px solid #ccc;
  outline: 2px solid blue;
}

<main class="twit-container">
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        Sitting in web dev... This class is so awesome!
      </p>
      <p class="twit-text">
        Para 2!
      </p>
      <p class="twit-text">
        Sitting in web dev... This class is so awesome!
      </p>
      <p class="twit-attribution">
        <a href="#">CSMajor2017</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">BeaverBeliever</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">NewtonRulez</a>
      </p>
    </div>
  </article>

  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        Huh?
      </p>
      <p class="twit-attribution">
        <a href="#">ConfusedTweeterer</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">Setup</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">Punchline</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">Hess</a>
      </p>
    </div>
  </article>
  <article class="twit">
    <div class="twit-icon">
      <i class="fa fa-bullhorn"></i>
    </div>
    <div class="twit-content">
      <p class="twit-text">
        text
      </p>
      <p class="twit-attribution">
        <a href="#">TheIRS</a>
      </p>
    </div>
  </article>
</main>
<button type="button" id="create-twit-button"><i class="fa fa-bullhorn"></i></button>

- Umutambyi Gad

---

是的，但这会拉伸底部行而不是显示更少的项目。 - Harry

你可以更改 flex-basis 以避免它。 - Umutambyi Gad

是的，但那样就和我的例子完全一样了，而且没有截断最后一行。 - Harry

好的，也许您可以编辑您的问题或在上面设置悬赏以获得更好的答案。 - Umutambyi Gad