CSS/flexbox : Only show as many items as will fit in container

Question

我的目标是构建一个面包屑样式组件:

1. 显示元素的水平列表
2. 每个元素都有最大宽度
3. 如果宽度不足以显示它们，则从列表的开头省略元素
4. 优先考虑列表中的最后项
5. 所有布局仅使用 CSS 实现(无 JS 大小调整观察器等)

Flexbox 似乎是一个不错的起点，但是当涉及到要求 3 和 4 时，我不确定最好的方法是什么。

到目前为止，这是我的思考过程:

a) 首先，我可以用这样的元素创建一个 flexbox，每个 100 像素宽:

https://codepen.io/mattwilson1024/pen/LLvMzB

b) 现在假设容器只有 300px。我可以让所有元素都可收缩(flex: 0 1 100px)。这对于少量元素来说没问题，但如果我有很多元素，它们都会变得太小。

https://codepen.io/mattwilson1024/pen/pwBqdN

我真正想要的是它只显示适合容器的元素。在这种情况下，这将是元素 7-9。

c) 启用 flex-wrap: wrap 意味着每一行只显示尽可能多的元素。这更接近我所追求的，除了我只想要最后一行。

https://codepen.io/mattwilson1024/pen/YQMdEB

d) 媒体查询可能会有帮助。例如，我可以使用媒体查询在小屏幕上隐藏除最后 3 个元素之外的所有元素，以及在大屏幕上隐藏除最后 6 个元素之外的所有元素等。但是，我需要知道组件的确切位置使用并相应地调整数字。我宁愿找到一个基于容器大小<​​/em>而不是视口(viewport)大小的解决方案。

Answer 1

您需要进行 3 次调整(在上一个示例中)才能满足您的要求:

• 关于 flex 容器items

  • 移除 flex-wrap: wrap
  • 添加justify-content: flex-end

• 在 flex items item last child

  • 添加margin-right: auto

它的工作原理是这样的，其中 flex-end 将 右对齐 使最后的元素成为可见的元素。

当填充容器的元素较少时，margin-right: auto 将使元素左对齐。

Update codepen ，其中我还为 flex 元素提供了 max-width 并将 flex 更改为 flex: 0 0 auto，因此它们会根据内容进行调整并在超过最大宽度时获得省略号。

---

在下面的 Stack 片段中，我将 flex: 0 0 100px 中的 flex-shrink 从 1 更改为 0，因此它清楚地显示了它的行为方式:

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

---

已更新

根据评论，如果元素不能被截断，可以使用row-reverse、flex-end 和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>