使用flex CSS项设置折叠优先级？-Java 学习之路

我有一个 <ul> 元素，其样式是水平列出其内部 <li> 元素：

一个是第一个数字|二是第二个数字|三是第三个数字|四是第四个数字

这适用于较短的内容，但如果没有足够的空间来显示它们，这些"cells"需要以不同的优先级崩溃 without wrapping .

...Something like this:

一个是第一个数字|二是... |三是... | F...

因此，第一个单元格应始终显示其内容的100％，后两个单元格应显示~40-50％（流畅地或作为硬编码的宽度/百分比），第四个单元格可以占用任何剩余的内容（如果有的话））...没有溢出父容器的边界 .

哦，这些项目都需要同样美观 .

Possible to do cleanly without flex/JS? 我不确定 . 我们的想法是创建一些视觉上吸引人的东西，它可以在单行中尽可能多地显示列出的部分中的信息，第一个信息始终显示其所有内容而没有省略号/包装/溢出并在该行中占据最高优先级 .

EDIT: 我只是想澄清一下，设置 min-width 在这里不起作用，因为内容可以在少于 min-width 的情况下呈现 . （考虑"abc"而不是"two is the..." ...这应该只占"abc"的空间 <li> .

1 回答

所以这就是我能想到的 flexbox - 我想这会让你开始：

flexbox 的 ul 与 white-space:nowrap 对所有flex子项保持文本内容在一行中 .
根据您的要求，向第一个孩子添加 ellipsis 除了第一个孩子 .
这里的魔力是通过以下方式完成的：

ul > li:first-child {
  flex: 0 1 auto;
}
ul > li:nth-child(2) {
  flex: 0 1 auto;
}
ul > li:nth-child(3) {
  flex: 0 2 auto;
}
ul > li:nth-child(4) {
  flex: 0 3 auto;
}

一个 . 对于第一个flex子，我们禁用 flex-grow

湾对于其他flex儿童，我们使用相对的 flex ing .

请告诉我您对此的反馈 . 谢谢！

ul {
  list-style-type: none;
  display: flex;
  padding: 0;
  margin: 0;
}
ul > li {
  white-space: nowrap;
  padding: 5px;
}
ul > li:not(:last-child) {
  border-right: 1px solid;
}
ul > li:not(:first-child) {
  overflow: hidden;
  text-overflow: ellipsis;
}
ul > li:first-child {
  flex: 0 1 auto;
}
ul > li:nth-child(2) {
  flex: 0 1 auto;
}
ul > li:nth-child(3) {
  flex: 0 2 auto;
}
ul > li:nth-child(4) {
  flex: 0 3 auto;
}

<ul>
  <li>one is the 1st number</li>
  <li>two is the 2nd number</li>
  <li>three is the 3rd number</li>
  <li>four is the 4th number</li>
</ul>

回复于 2024-05-19T08:22:56+08:00

使用flex CSS项设置折叠优先级？

1 回答

相关问题