弹性框/网格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列，我希望最后一行根本不显示。在flexbox示例中，项目以一种丑陋的方式爆炸，并且在网格中它们只是在那里摇晃。

有没有可能只使用flexbox/或网格或其他方法，而不需要媒体查询，或者我必须根据屏幕大小进行计算？

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>

​

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>

​