时间戳

首页 > 解决方案 > 如何使用 CSS 隐藏 flex 列中的部分行？

html - 如何使用 CSS 隐藏 flex 列中的部分行？

问题描述

这在标题中很难解释。我有一个 div，它显示列的 flex 和 flex-direction，其中有很多行：

<div class="flex column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    //etc
</div>

每行都说 20px 高，并且容器隐藏了溢出。除非容器的高度是 20 的倍数，否则会留下部分可见的行。

我想要完成的是让 CSS 自动使行高足够高到最后一个半可见的行不再可见，并且以 px 为单位的新行高完全划分为父容器的高度。

这可以用纯 CSS 完成吗？

我可以接受的另一个选项是 CSS 自动隐藏现在部分可见的最后一行

这是问题的代码笔：https ://codepen.io/random33443/pen/WNQBQOy

标签： htmlcssflexbox

解决方案

您可以依靠 wrap 功能，您的元素将自动移动到没人能看到的另一列。

调整以下示例的大小并查看：

.flex-column {
  display:flex;
  flex-direction:column;
  flex-wrap:wrap; /* this is important */
  height:200px;
  overflow:hidden; /* this one too */
  resize:vertical;
  border:1px solid red;
}
.flex-column *{
  height:25px;
  flex-shrink:0;
  border:2px solid green;
  width:100%; /* and especially this one */
  box-sizing:border-box;
}
<div class="flex-column">
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
    <div class="row">Content of row</div>
</div>

推荐阅读