有column-count，但是我想知道CSS列中的條目有沒有item-count這樣的東西？我很難保持我的3列FAQ中固定的項目數量，而不指定列本身的高度。

在這個例子中，我希望每列有3個項目，無論每個項目中的問題或答案有多長。在實際的網站中，我不知道項目的確切數量，所以我只想保持它們的“平衡”。

你可以看到，我嘗試使用flexbox，但答案面板將保存動態內容(問題/項目的數量也是如此)。我的目的是讓它看起來像一個磚石布局每當答案面板顯示。

.m-faqs {
  /*display: flex;
  flex-flow: row wrap;
  justify-content: space-between;*/
  column-count: 3;
  column-gap: 50px;
}

.m-faqs_item {
  margin-bottom: 20px;
  position: relative;
  /*flex: 0 0 47%;
  align-self: baseline;*/
  display: inline-block;
  break-inside: avoid;
  width: 100%;
}

.m-faqs_title {
  margin-top: 0;
  margin-bottom: 0;
}

.m-faqs_question {}

.m-faqs_question-link {
  display: inline-block;
}

.m-faqs_answer {}

.m-faqs_item.active .m-faqs_answer {
  display: block;
}

<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p> 
    </div>
  </div>
</div>

使用column-count時，可用空間是為給定數量的文本分配的，而不是給定數量的項目。當容器沒有指定高度時，文本將均勻分布，所以如果較長的問題占用更多的空間，在下一列中，可以將空間分配給兩個問題，就像我們在您的示例中看到的那樣。

有幾種解決方法:

最簡單和最有效的方法是要么呈現將項目分成3個容器的HTML，要么使用JS代碼計算所有項目并將它們包裝到容器中。每個容器都將是一個行為與您描述的完全一樣的列。

使用網格。缺點是它沒有很好的瀏覽器覆蓋范圍，并且看起來不像你可能期望的那樣:

.m-faqs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 50px;
}

.m-faqs_item {
  margin-bottom: 20px;
}

<div class="m-faqs">
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
  <div class="m-faqs_item">
    <h3 class="m-faqs_title"><span class="m-faqs_question">Question here</span></h3>
    <div class="m-faqs_answer">
      <p>Here's the answer.</p>
    </div>
  </div>
</div>

如果你的容器有

column-count: *numeric*

將容器內的項目設置為

break-inside:avoid

為了向后兼容

page-break-inside:avoid;
-moz-column-break-inside:avoid;
break-inside:avoid