仅显示适合的项目数，然后展开以紧贴适合

Question

我有一个容器，我想在水平方向上容纳多个孩子，但我知道我的孩子比通常容纳的孩子多。

+-----------------------+
|                       |
|                       |
+-----------------------+

+----+ +----+ +----+ +----+ +----+ +----+ 
|    | |    | |    | |    | |    | |    | 
|    | |    | |    | |    | |    | |    | 
+----+ +----+ +----+ +----+ +----+ +----+ 

仅使用 CSS，如何仅显示适合的项目，并展开它们以贴合您的需求？

想要的结果：

+-----+-----+-----+-----+
|     |     |     |     |
|     |     |     |     |
+-----+-----+-----+-----+

Answer 1

@NathanArthur 的解决方案非常适合您有固定高度的情况，但是如果您不知道自己的身高，事情就会变得更加棘手。

要在没有固定高度的情况下执行此操作，您可以使用display: grid. 目前，浏览器对 css 网格的支持相当限于最新版本，但我相信这将是在没有固定高度的情况下为数不多的（如果不是唯一的）方法之一。

但是您可以做的是使用该函数与该函数相结合display: grid来设置一个列。这将为您提供具有您设置的最小尺寸的列，这将填充所需的其余空间。将此与它将隐藏由子自动放置添加的任何其他行，如果它们开始超出定义的参数的范围，则会发生这种情况。看起来有点像这样，注意没有定义的高度和可变的宽度：auto-fitrepeat()minmax()grid-auto-rows: 0pxgrid-template

ul {
  border: 1px solid red;
  width: 350px;
  overflow: hidden;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-template-rows: 1fr;
  grid-auto-columns: 0px;
  grid-auto-rows: 0px;
}

ul.test2{
  width: 520px;
}

ul > li  {
  border: 1px solid blue;
  box-sizing: border-box;
}
  

<ul>
  <li>Item 1</li>
  <li>Item 2<br><br><br> with some extra height</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>
<ul class="test2">
  <li>Item 1</li>
  <li>Item 2<br><br><br> with some extra height</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>

Answer 2

解决方案可以分为两部分：

隐藏不适合的元素

• 给容器一个定义的宽度和高度。
• 将孩子的高度定义为与容器的高度相同。
• 将容器设置为overflow: hidden;使包裹的儿童消失。

（感谢这个答案激发了解决方案的这一部分。）

扩展适合占用可用空间的儿童

• 设置您的容器，display: flex;以便孩子们可以成长。
• 将您的容器设置为flex-wrap: wrap;让不适合的儿童仍然可以包裹并消失。
• 设定孩子，flex: 1 0 [desired minimum width];让孩子只能成长，不能萎缩。

结果

ul {
  border: 1px solid red;
  width: 350px;
  height: 100px;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

ul > li  {
  border: 1px solid blue;
  display: block;
  flex: 1 0 100px;
  height: 100px;
  box-sizing: border-box;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
  <li>Item 6</li>
  <li>Item 7</li>
</ul>