CSS/Flexbox:只显示容器中适合的项目

Question

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

1. 显示项目的水平列表。
2. 具有每个项的最大宽度。
3. 如果没有足够的宽度显示项目，则从列表的开头省略项目。
4. 列出列表中最后一项的优先顺序
5. 所有只使用CSS实现的布局(没有JS调整大小的观察者等)

Flexbox似乎是一个很好的起点，但是当涉及到需求3&4时，我不知道最好的方法是什么。

到目前为止，我的思考过程如下：

( a)首先，我可以创建一个包含这样的项目的柔性盒，每个100 To宽：

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

现在，让我们想象一下，对于这个容器，我们只有300‘s。我可以所有的物品收缩(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项之外的所有其他项目。然而，我需要知道组件的确切位置，并相应地调整数字。我更希望找到一个基于容器大小而不是视口大小的解决方案。

Answer 1

您需要进行3次调整(在最后一个示例中)以满足您的要求：

• 在flex容器items上

- remove `flex-wrap: wrap`
- add `justify-content: flex-end`

​

• 关于flex item最后一个子项目

- add `margin-right: auto`

​

它的工作方式是这样的，在这里，flex-end将正确地对齐使最后一个项成为可见项的项。

当需要填充容器的项目较少时，margin-right: auto将使保留的项对齐。

在更新代码中，我还为flex项提供了一个max-width，并将flex更改为flex: 0 0 auto，因此当flex项超过最大宽度时，它们就会调整到内容，并得到省略。

在下面的堆栈片段中，我在flex: 0 0 100px中将flex: 0 0 100px从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>

​