html – CSS flexbox最大列号？

当用户扩展浏览器窗口时,我希望我的css flexBoxes最多有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;

}

不确定,为什么css代码形成怪异,但它与jsfiddle链接中的代码相同

解决方法

您可以设置.twit的flex-basis属性,该属性告诉flexBox在将剩余空间拆分为所有元素之前,为每个.twit元素提供什么基本宽度.

尝试将以下CSS添加到.twit(我使用30％而不是33％来考虑边距和填充,但您可以使用此数字.)

flex-basis: 30%;