2

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>
Mels_D
  • 109
  • 7
  • Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – Rio Weber Jun 03 '20 at 19:18
  • @RioWeber thank you, but I don't think that will work, because my li;s can have a different width on each page. What I want is that they become invisible if they are shown eg only partially – Mels_D Jun 03 '20 at 19:27

2 Answers2

1

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

Rio Weber
  • 2,757
  • 1
  • 20
  • 28
  • thanks, I used the ugly version with float and overflow hidden, not the nicest indeed, but works perfect in my case – Mels_D Jun 04 '20 at 08:35
0

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.

Berk Kurkcuoglu
  • 1,453
  • 1
  • 9
  • 11