css flex ul with first and last fixed li

Question

好的，我现在开始更多地使用 flexbox，但这对我来说不是很合乎逻辑，

我有一个未排序的水平列表 (ul(，其中包含 +/- 10 个项目 (li(，仅包含 1 行，没有自动换行等。 我想要的是第一个和最后一个始终可见，如果没有足够的屏幕空间，其他可以有一个"display：none"。li;s 在每个页面上可以有不同的宽度。我现在有这段代码，它有点工作，但如果屏幕或浏览器不够宽，列表项现在半可见。它们应该完全不可见， 我怎样才能做到这一点？ 我尝试了很多事情....

ul{
list-style: none;

width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap ;
overflow: hidden;
white-space: nowrap;
position: relative
}
ul li{
flex: auto;
display:  inline-block;
line-height: 30px;
float: left;
margin-right: 0px;
}
ul li.b{
background:#ccc;
position: absolute;
right: 0
}
ul li a{
display: inline-block;
margin-right: 0px;
padding: 0 10px 0 10px
}

<ul>
<li class="a"><a href="#">fixed</a></li>
<li><a href="#">2 test</a></li>
<li><a href="#">3 test</a></li>
<li><a href="#">4 test</a></li>
<li><a href="#">5 test</a></li>
<li><a href="#">6 test</a></li>
<li><a href="#">7 test</a></li>
<li><a href="#">8 test</a></li>
<li><a href="#">9 test</a></li>
<li class="b"><a href="#">last fixed</a></li>
</ul>

Answer 1

"如果仅部分显示，则使其不可见">

不幸的是，使用弹性框无法做到这一点。
但是，这可以使用display: block; float: left;和overflow: hidden;

请参阅此处的示例：https://jsfiddle.net/q4m2grnz/

但是，我再次建议不要使用此方法，以及任何其他不使用媒体查询的方法。

媒体查询是基于屏幕大小的任何动态功能的标准。

Answer 2

尝试去掉最后一个 li 的位置：绝对，并在 flex 容器 (ul( 中添加 justify-content： 空格，当其他元素被隐藏时，它将分离剩余的两个元素。

此外，"ul"带有填充宽度，因此您必须设置填充：0才能重置。

另一件事是您正在使用 flex：auto on li 项目，如果您删除该部分，它会扩展它们，一切都应该就位。