Html CSS flexbox最大列数？

我希望我的css FlexBox在用户扩展其浏览器窗口时最多有3列。在我当前的代码中，它正确地向内弯曲，没有最小的列数，但向外扩展时，它总是自动将所有FlexBox向外扩展到一行。

在本例中，我尝试只使用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代码的格式为何奇怪，但它与JSFIDLE链接中的代码相同，您的flexbox包含8个子元素，因此默认情况下flexbox将在一行上容纳尽可能多的元素，因为您的JSFIDLE只有700px宽，所有剩余的子元素都发布在第二行上。碰巧第一行的最小宽度最终是三列宽

为了解决这个问题，我将在各自的flexbox中分离每个连续的三元组flex项，剩下的两个在一个两列flexbox中。一旦项目进一步折叠，它们将全部堆叠到一列中

.twit容器{
显示器：flex；
柔性包装：包装；
填充物：5px；
裕度：-10px0-10px；
位置：相对位置；
}
特维特先生{
显示：内联块；
填充：20px；
宽度：150px；
高度：200px；
利润率：10px01%；
背景色：#fff；
边框：1px实心#ccc；
柔性生长：1；
外形：2倍纯蓝；
}

您可以设置

.twit

的

flex basis

属性，在将剩余空间拆分为所有元素之前，该属性告诉flexbox每个

.twit

元素的基本宽度

尝试将以下CSS添加到

.twit

（我使用了30%而不是33%来解释边距和填充，但您可以使用这个数字。）

---

我们希望这些项扩展到相等的全宽，但我们也希望这些项在太多时换行。 因此，我们知道我们需要

flex-direction:row

在这里指定项目应该水平流动。我们还知道，我们需要

flex-wrap:wrap

，以便这些项目在填充宽度后流入新行

但我们也希望这些项目的大小，以填补宽度，是他们回流后可用。这就是

flex-basis

的用武之地。下面的屏幕截图将解释这是如何工作的

这就是flex basis的解释方式：

flexBasis是一种独立于轴的方式，用于提供 沿主轴的项目。设置子对象的flexBasis是 类似于在其父级为子级时设置该子级的宽度 具有flexDirection的容器：行或设置子级的高度（如果需要） 其父容器是一个flexDirection:column的容器。弹性基础 项目是该项目的默认大小，即之前项目的大小 执行任何flexGrow和flexShrink计算

---

您可以在这里尝试完整的JSFiddle:

在这种情况下，我试图在不编辑html文件的情况下设置一个3列的最大值，忘了提到这一点，我要编辑我原来的postAhh是的，这是我一直在寻找的命令。谢谢，这解决了我的问题，并设置了一个最大列宽很乐意帮助！仅供将来参考，css技巧有一篇关于flexbox的文章，我在使用它时总是打开它。以下是链接：我添加了一个带有更多细节的备选答案和一个示例图像加代码：

.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;
}

flex-basis: 30%;