没有重叠项目的Flexbox包装列表

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了没有重叠项目的Flexbox包装列表相关的知识，希望对你有一定的参考价值。

我有一个要包装的列表，以显示在最大宽度为540px的弹出模式中。

通常看起来像这样：

Normal List

但是如果添加了太多名称，则它将像这样重叠：

Overlapping List

我的目标是通过隐藏溢出（仅根据数据显示可能的最大列数）或使其可滚动来防止名称重叠。

我如何包装列表以占据水平和垂直空间（如下所示），但在未知项目数和名称长度时防止项目重叠？

这是我当前使用的html和CSS的代码段：

.modal {
  width: 600px;
}

.wrapped-list {
	margin-top: 12px;
	max-height: 200px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
 }
<div class="modal">
<ol class="wrapped-list"><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li><li>Student Name</li></ol>
</div>
答案

您可以执行以下操作：

.modal {
  width: 600px;   
  max-height: 200px;
}

.wrapped-list {
    width: 600px;
	margin-top: 12px;
	max-height: 200px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
   overflow-x:auto;
 }
 
.wrapped-list li{
   padding-right:50px; 
 }
<div class="modal">
  <ol class="wrapped-list">
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
    <li>Student Name</li>
  </ol>
</div>

以上是关于没有重叠项目的Flexbox包装列表的主要内容，如果未能解决你的问题，请参考以下文章

Flexbox 列对齐项目的宽度相同但没有包装器居中（仅限 css）

Android片段重叠

给包装的 flexbox 项目提供垂直间距

Flexbox：一旦另一个弹性项目的宽度为0，如何包装一个弹性项目？

Zebra 使用包装项目对 flexbox 表进行条带化

在 Safari 中重叠 CSS flexbox 项目