css flex ul with first and last fixed li

user_5529327 0
Viewed 102

Ok, I am now starting to use flexbox a bit more, but it is not very logic to me as an old man,

I have an unsorted horizontal list (ul) with +/- 10 items (li) That consist out only 1 row, no word wrap etc. What I want is that the first and the last one are always visible, and the others can have a 'display:none' if there is not enough screen space. The li;s can have different widths on every page. I have now this code, and it sort of works, but a list item is now half visible if the screen or browser is not wide enough. They should go completely not visible, how can I achieve this? I have tried many things ....

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>

css html jquery
2 Answers

"Make become invisible if they are shown only partially"

Unfortunately this isn't possible using flex-boxes.
But, this is possible using display: block; float: left; and overflow: hidden;

See example here: https://jsfiddle.net/q4m2grnz/

However I advise agains't this method, and any others that don't use media query's.

Media Queries are the standard for any dynamic functionality based on screen size.

user_34669070

Try getting rid of position: absolute for the last li and add justify-content: space-between to the flex container (ul), which will seperate the remaining two elements when the others are hidden.

Also the 'ul' comes width a padding so you have to set padding: 0 to reset that.

One other thing is that you are using flex: auto on li items which expands them if you remove that part everything should be in place.

user_52277210
Related