Html css-动态地分隔列表项

我想水平显示列表项，但项之间的间距必须是动态的。i、 e根据最长的项目，所有其他项目必须对齐。因此，为项目指定

固定宽度将不起作用

有空就说

Element 1     Element 2     Very long element can also be here      This is one more element which is longer
Longer than Element1   Next element   More ones

我希望它能像这样展示出来

Element 1             Element 2        Very long element can also be here    This is one more element which is longer
Longer than Element1  Next element     More ones

元素2
必须向右移动，因为下一行有一个较长的项目


我怎样才能做到这一点

谢谢..
试试这段代码，看看它是否有用

ul {
  display: flex;
  flex-wrap: wrap;
}
li {
  min-width: 5em;
  list-style: none;
}

<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Very long element can also be here</li>
<li>This is one more element which is longer</li>
<li> Longer than Element1</li>
</ul>

ul{
显示器：flex；
柔性包装：包装；
}
李{
最小宽度：5em；
列表样式：无；
}

要素1
要素2
很长的元素也可以在这里
这是一个更长的元素
比元素1长


试试这个


表格{
宽度：100%；
}
表td{
填充：10px；
}

要素1
要素2
很长的元素也可以在这里
这是一个更长的元素
比元素1长
下一个元素
更多的
您可以使用htmltables@thewbmstr其思想是不指定项目的宽度。i、 e处理前的列数没有CSS方法可以实现此结果。Javascript将是必需的。仍然
Element2
未根据第二行中的项目对齐。请检查答案中更新的小提琴，并根据您的设计要求增加或减少div类中的边距。我将加载的数据将是动态的。您的答案将内容分组到div中（假设数据是静态的）。我不可能知道加载的数据是动态的，但在本例中，使用jquery向div添加项，您可以使用div的classname在特定div中添加特定项。此结构将保持不变。感谢您的回答。但这会将一个项目包装到下一行，我不知道一行中必须放置多少个元素。这取决于项目的长度。我的意思是，数据（列表项目）的加载将在循环中进行。所以我不知道什么时候开始新的工作。（angularjs）