html - css flex ul 与第一个和最后一个固定 li

Question

好吧，我现在开始更多地使用 Flexbox，但对于我这个老人来说，这不太符合逻辑，

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

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

"Make become invisible if they are shown only partially"

不幸的是，使用 flex 盒这是不可能的。
但是，使用 display: block; 这是可能的。 float :左； 和 溢出:隐藏；

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

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

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