CSS flexbox最大列数？

Question

当用户扩展浏览器窗口时，我希望我的 css 弹性框最多有 3 列。使用我当前的代码，它可以正确地向内弯曲，没有最小列数，但是当向外扩展时，它总是会自动将所有 flexbox 扩展成一行。 http://jsfiddle.net/oq6prk1p/581/

在这种情况下，我试图只使用 css 文件来实现这一点，而根本不编辑 html 文件。到目前为止，这是我得到的最接近的：

html 文件：

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

css 文件：

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

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

Answer 1

您的 flexbox 包含 8 个子元素，因此默认情况下，flexbox 将在一行中容纳尽可能多的元素，因为您的 jsfiddle 只有 700px 宽，所有剩余的子元素都发布在第二行。碰巧第一行的最小宽度最终是三列宽。

为了解决这个问题，我会将每个连续的三元组 flex 项分隔在它们​​自己的 flexbox 中，其余两个在一个两列 flexbox 中。一旦项目进一步折叠，它们将全部堆叠成一列。

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

.twit {
  display: inline-block;
  padding: 20px;
  width: 150px;
  height: 200px;
  margin: 10px 0 0 1%;
  background-color: #fff;
  border: 1px solid #ccc;
  flex-grow: 1;
  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-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>
</main>

<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">
        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>
</main>

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

Answer 2

您可以设置.twit 的flex-basis 属性，它告诉flexbox 给每个.twit 元素提供什么基本宽度，然后将剩余空间分配给所有元素。

尝试将以下 CSS 添加到 .twit（我使用 30% 而不是 33% 来说明边距和填充，但您可以使用这个数字。）

flex-basis: 30%;

Answer 3

我们希望项目扩展以相等地占据整个宽度，但我们也希望这些项目在它们太多时换行到一个新行中。 因此我们知道这里需要flex-direction: row 来指定项目应该水平流动。我们还知道我们需要flex-wrap: wrap，以便这些项目在填满宽度后流入新行。

但我们也希望这些项目调整大小以填充回流后可用的宽度。这就是flex-basis 的用武之地。下面的截图将解释它是如何工作的。

这就是 flex-basis 的解释方式：

flexBasis 是一种与轴无关的方式，提供默认大小 沿主轴的项目。设置孩子的 flexBasis 是 类似于设置该子项的宽度，如果其父项是 带有 flexDirection: 行的容器或设置孩子的高度 if 它的父级是一个带有 flexDirection: 列的容器。弹性基础 一个item是那个item的默认大小，前一个item的大小 执行任何 flexGrow 和 flexShrink 计算。

您可以在此处尝试完整的 JSFiddle：https://jsfiddle.net/paramaggarwal/w37t0epy/1