没有重叠项目的 flexbox 列换行列表

【问题标题】：flexbox column wrap list without overlapping items没有重叠项目的 flexbox 列换行列表
【发布时间】：2020-07-24 19:28:02
【问题描述】：

我有一个列表，我想包装它以显示在最大宽度为 540 像素的弹出模式上。

通常是这样的：

但是如果添加的名字太多，就会像这样重叠：

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

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

这是我目前正在使用的带有 html 和 css 的 sn-p：

.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>

【问题讨论】：

    标签： html css flexbox


    【解决方案1】：

    你可以这样做：

    .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>

    【讨论】：

    • 我删除了 flex wrap，它可以很好地滚动，但目标是让它包裹在多个列中。
    • @SethKillian 现在检查答案，我已经更新了代码。
    【解决方案2】：

    将 flexbox 与 column wrap 一起使用是臭名昭著的错误（请参阅下面的部分列表）。

    这个设置有很多问题，我建议尽可能远离column wrap。请改用row wrap 或 CSS Grid。

    在这种特殊情况下，列正确地包裹了内容，但 flex 算法没有考虑容纳列表项标记所需的宽度。

    为了说明，下面是带有边框的内容：

    .modal {
  width: 600px;
}

.wrapped-list {
  margin-top: 12px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

li {
  border: 1px solid red;
}
    <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>

    从第一列可以清楚地看到，标记被排除在宽度计算之外，并且与以下列中的内容重叠。

    如果您要坚持使用column wrap，您可以尝试通过为所有项目添加左边距来补偿缺少的宽度，从第二列中的第一项开始。

    类似这样的：

    li:nth-child(n + 11) {
  margin-left: 45px;
}


    .modal {
  width: 600px;
}

.wrapped-list {
  margin-top: 12px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  overflow: auto;
}

li:nth-child(n + 11) {
  margin-left: 45px;
}
    <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>

    flexboxcolumn wrap的部分问题列表：

    【讨论】：

    • 保证金绝对是解决方案 - 至少与人们期望的解决方案一样好。从第二列开始也是一个很好的接触。
    猜你喜欢
    • 2021-07-29
    • 2013-05-21
    • 2018-07-20
    • 2015-12-08
    • 2017-03-12
    • 1970-01-01
    • 2020-02-07
    • 2014-05-05
    • 2017-12-18
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode