flexbox列换行列表，没有重叠的项目 [英] flexbox column wrap list without overlapping items

查看：55
本文介绍了flexbox列换行列表，没有重叠的项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a list that I'd like to wrap to show on a pop-up modal which has a maximum width of 540px.

通常看起来像这样:

但是如果添加的名称过多，则会像这样重叠:

But if too many names are added, then it'll overlap like this:

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

My goal is to prevent the names from overlapping either by hiding the overflow (only show the maximum possible columns based on the data), or by making it scrollable.

我如何包装列表以占据水平和垂直空间(如下所示)，但是在未知项目数和名称长度的情况下如何防止项目重叠?

How can I wrap the list to take up the horizontal and vertical space (as showed below) but prevent the items from overlapping when the number of items and length of the names is not known?

以下是我当前使用的html和css的代码段:

Here's a snippet with the html and css that I'm currently using:

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

推荐答案

使用带有 column wrap 的flexbox臭名昭著(请参见下面的部分列表).

Using flexbox with column wrap is notorious for bugs (see a partial list below).

此设置存在很多问题，因此我建议尽可能避免使用列换行.改用 row wrap 或CSS Grid.

There are so many problems with this set up, that I would recommend staying away from column wrap whenever possible. Use row wrap or CSS Grid instead.

在这种情况下，各列可以正确包装内容，但是flex算法没有考虑容纳列表项标记所需的宽度.

In this particular case, the columns are wrapping the content properly, but the flex algorithm is not factoring in the width needed to accommodate the list item markers.

为说明起见，以下是带有边框的内容:

To illustrate, here's the content with a surrounding border:

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

从第一列可以清楚地看到，标记不包括在宽度计算中，并且在接下来的列中与内容重叠.

As you can see clearly from the first column, the markers are excluded from the width calculation, and overlap content in the following columns.

如果您要坚持使用列换行，则可以尝试从第二列的第一个项目开始，向所有项目添加左边距来补偿缺少的宽度.

If you're going to stick with column wrap, you can try compensating for the missing width by adding a left margin to all items, starting with the first item in the second column.

类似这样的东西:

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>

flexbox 列换行的部分问题列表:

Partial list of problems with flexbox column wrap:

  • When flexbox items wrap in column mode, container does not grow its width
  • Flexbox: wrong width calculation when flex-direction: column, flex-wrap: wrap
  • Is it possible for flex items to align tightly to the items above them?
  • flex-wrap not working in nested flex container
  • Height of flex container not working properly in Safari
  • flexbox column wrap list without overlapping items

这篇关于flexbox列换行列表，没有重叠的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆