我的目标是构建一个面包屑样式组件，其中：
- 显示项目的水平列表
- 每个项目都有最大宽度
- 如果宽度不足以显示项目，则从列表开头省略项目
- 优先考虑last列表中的项目
- 所有布局仅通过 CSS 实现（没有 JS 调整大小观察器等）
Flexbox 似乎是一个很好的起点，但当涉及到要求 3 和 4 时，我不确定最好的方法是什么。
到目前为止我的思考过程是这样的：
a) 首先，我可以创建一个包含如下项目的 Flexbox，每个项目宽 100 像素：
https://codepen.io/mattwilson1024/pen/LLvMzB https://codepen.io/mattwilson1024/pen/LLvMzB
b) 现在假设容器只有 300 像素。我可以让所有物品都收缩（flex: 0 1 100px）。这对于少量物品来说没问题，但如果我有很多物品，它们都会变得太小。
https://codepen.io/mattwilson1024/pen/pwBqdN https://codepen.io/mattwilson1024/pen/pwBqdN
我真正想要的是它只显示容器中容纳的尽可能多的项目。在本例中，即为第 7-9 项。
c) 启用flex-wrap: wrap意味着每行只显示尽可能多的项目。这更接近我想要的，只是我只想要底行。
https://codepen.io/mattwlson1024/pen/YQMdEB https://codepen.io/mattwilson1024/pen/YQMdEB
d) 媒体查询可能会有所帮助。例如，我可以使用媒体查询隐藏小屏幕上除最后 3 个项目之外的所有项目，以及大屏幕上除最后 6 个项目之外的所有项目等。但是，我需要确切地知道该组件将在哪里使用并相应地调整数字。我宁愿找到一个基于的解决方案容器尺寸而不是视口的大小.
您需要进行 3 项调整（在上一个示例中）才能满足您的要求：
-
在弹性容器上items
- remove
flex-wrap: wrap
- add
justify-content: flex-end
-
关于弹性项目item最后一个孩子
它的工作原理如下，其中flex-end will 右对齐使最后一个项目成为可见项目的项目。
The margin-right: auto将制作物品左对齐当填充容器的物品较少时。
更新代码笔 https://codepen.io/anon/pen/xreeNy，我还给了弹性项目一个max-width并将 flex 更改为flex: 0 0 auto，因此它们会根据内容进行调整，并在超过最大宽度时得到省略号。
在下面的堆栈片段中我更改了flex-shrink从 1 到 0 中flex: 0 0 100px所以它清楚地显示了它的行为方式：
.items {
width: 300px;
display: flex;
justify-content: flex-end;
}
.item {
flex: 0 0 100px;
/* Truncate text with ellipsis */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item:last-child {
margin-right: auto;
}
/* Styling - not relevant to the question, just to make it look good */
.item {
border-right: solid 1px black;
box-sizing: border-box;
}
.item:nth-child(1) {
background-color: #e3f2fd;
color: black;
}
.item:nth-child(2) {
background-color: #bbdefb;
color: black;
}
.item:nth-child(3) {
background-color: #90caf9;
color: black;
}
.item:nth-child(4) {
background-color: #64b5f6;
color: black;
}
.item:nth-child(5) {
background-color: #42a5f5;
color: white;
}
.item:nth-child(6) {
background-color: #2196f3;
color: white;
}
.item:nth-child(7) {
background-color: #1e88e5;
color: white;
}
.item:nth-child(8) {
background-color: #1976d2;
color: white;
}
.item:nth-child(9) {
background-color: #1565c0;
color: white;
}
body {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 14px;
}
body > div:nth-child(2) {
font-family: sans-serif;
font-size: 12px;
}
<div class="items">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
<div><br>If less to fit the container, they align left<br><br></div>
<div class="items">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
Updated
根据评论，某项不能切碎的, 可以使用row-reverse, flex-end and order让它们从右下角开始。
这样他们就可以向上包裹并添加overflow: hidden只有适合容器宽度的内容才会可见
.items {
width: 300px;
height: 15px;
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
justify-content: flex-end;
overflow: hidden;
}
.item {
flex: 0 0 auto;
max-width: 100px;
padding: 0 10px;
/* Truncate text with ellipsis */
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* Styling - not relevant to the question, just to make it look good */
.item { border-right: solid 1px black; box-sizing: border-box; }
.item:nth-child(1) { background-color: #e3f2fd; color: black; order: 10; }
.item:nth-child(2) { background-color: #bbdefb; color: black; order: 9; }
.item:nth-child(3) { background-color: #90caf9; color: black; order: 8; }
.item:nth-child(4) { background-color: #64b5f6; color: black; order: 7; }
.item:nth-child(5) { background-color: #42a5f5; color: white; order: 6; }
.item:nth-child(6) { background-color: #2196f3; color: white; order: 5; }
.item:nth-child(7) { background-color: #1e88e5; color: white; order: 4; }
.item:nth-child(8) { background-color: #1976d2; color: white; order: 3; }
.item:nth-child(9) { background-color: #1565c0; color: white; order: 2; }
body {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 14px;
}
<div class="items">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>
<div class="item">Item 6</div>
<div class="item">Item 7</div>
<div class="item">Item 8</div>
<div class="item">Item 9</div>
</div>
<div><br>If less to fit the container, they align left<br><br></div>
<div class="items">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
