CSS Flexbox: element width

Question

I have a flex ul with three li. The first and last li have contents of unknown and possibly differing length. The middle li should have its contents centered in the middle of the ul.

Is there any way to accomplish this with pure HTML/CSS?

ul {
  display: flex;
  width: 250px;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  white-space: nowrap;
  border: 1px solid blue;
}

li:first-of-type {
  flex: 0;
}

li:not(:first-of-type):not(:last-of-type) {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

li:last-of-type {
  flex: 0;
  text-align: right;
}

  
  <ul>
    <li>Some Options</li>
    <li>Some long Title</li>
    <li>Done</li>
  </ul>

This question is not a duplicate of [Keep the middle item centered…](https://stackoverflow.com/questions/32378953/keep-the-middle-item-centered-when-side-items-have-different-widths). The image the asker posted shows that the three `li` items don’t have to be of equal width. — Lypyrhythm, Jul 21 '19 at 15:37
@DavidThomas yes, only three. It's like the menu at the top of an iOS Screen. — Tonald Drump, Jul 21 '19 at 16:49

Lypyrhythm · Answer 1 · 2019-07-21T15:10:56.200

~~Just change the flex property in li:first-of-type to 1. This simply means that you want that li element to expand.~~

Edit:

Since you want the middle li to be centered inside the ul the solution above won’t work. As far as I know, it is not possible to achieve this using pure CSS (please correct me if I’m wrong); use JavaScript instead. The cleanest way to do this is to make the first and the last li be of equal width:

// select the first and last li
var first = document.querySelector("li:first-of-type");
var last = document.querySelector("li:last-of-type");

if(first.offsetWidth > last.offsetWidth) {
    // resize last li to width of first li
    last.style.width = first.offsetWidth + "px";
} else {
    // resize first li to width of last li
    first.style.width = last.offsetWidth + "px";
}

Also make sure that you remove the flex property from li:first-of-type and li:last-of-type in the CSS.

Thanks, I also feared that it might be impossible using CSS.. — Tonald Drump, Jul 21 '19 at 16:52

G-Cyrillus · Answer 2 · 2019-07-21T19:22:59.837

you need to set a similar flex value to each li to make work. the simpliest would be : flex:1; but flex:1 1 auto; works about too. a flex-basis , would work too but won't be flexible.

Demo below

ul {
  display: flex;
  width: 250px;
  padding: 0;
    background:linear-gradient(0deg,rgba(0,0,0,0) 50% , rgba(0,0,0,0.2) 50%),linear-gradient(90deg,rgba(0,0,0,0) 50% , rgba(0,0,0,0.2) 50%);

}

li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  white-space: nowrap;
  border: 1px solid blue;
}

ul:first-of-type li {
  flex: 1;
}

hr~ul li {
  flex: 1 1 auto;
}

li:first-of-type {}

li:not(:first-of-type):not(:last-of-type) {
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

li:last-of-type {
  text-align: right;
}

hr~hr~ul li {
  flex: 1 0 auto;
}

hr~hr~ul li:not(:first-of-type):not(:last-of-type) {
  max-width: 4em
}

<p><code>flex:1;</code> result</p>
<ul>
  <li>Some Options</li>
  <li>Some long Title</li>
  <li>Done</li>
</ul>
<ul>
  <li>Some Options more</li>
  <li>Some long Title</li>
  <li>Done</li>
</ul>
<hr>
<p><code>flex:1 1 auto;</code> result</p>
<ul>
  <li>Some Options</li>
  <li>Some long Title</li>
  <li>Done</li>
</ul>
<ul>
  <li>Some Options more</li>
  <li>Some long Title</li>
  <li>Done</li>
</ul>
<hr>
<p><code>max-width</code> result</p>
<ul>
  <li>Some Options</li>
  <li>Some long Title</li>
  <li>Done</li>
</ul>
<ul>
  <li>Some Options more</li>
  <li>Some long Title</li>
  <li>Done</li>
</ul>

I did not make any flex-basis example but a max-width and added the flex:1 1 auto; to show the difference it can make. i believe flex:1; is, the closest if not , the result you expect.

You might also use flex:X with different values for the two outsider

ul {
  display: flex;
  width: 250px;
  padding: 0;
  /*see middle*/
  background:linear-gradient(0deg,rgba(0,0,0,0) 50% , rgba(0,0,0,0.2) 50%),linear-gradient(90deg,rgba(0,0,0,0) 50% , rgba(0,0,0,0.2) 50%);
}

li {
  margin: 0;
  padding: 0;
  list-style-type: none;
  white-space: nowrap;
  border: 1px solid blue;
  flex:2;
}

li:first-of-type {

}

li:not(:first-of-type):not(:last-of-type) {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

li:last-of-type {

  text-align: right;
}

<ul>
    <li>Some Options</li>
    <li>Some long Title</li>
    <li>Done</li>
  </ul>

Thanks, but in none of the results the Title is in the center of the `ul` — Tonald Drump, Jul 21 '19 at 16:51
@TonaldDrump with **flex:1;** all 3 ul have the same width, so the one in the middle is in the middle. Anyway, there you have the few option of what you can do to make text-overlow effective, , pick up the one that makes the best compromise for you,, else , try manage this with javascript to reset the width for each lis on the fly. **And by the way, what browser(s) did you use testing the snippet ?** else you may also keep playin with the `flex` value (see answer's update for another compromise) — G-Cyrillus, Jul 21 '19 at 19:17
Thanks, unfortunately this only works well when the outer elements are more or less this exact length. If they are very short, the middle element is abbreviated unnecessarily. I guess I'll go the Javascript route :) Tested on Safari btw — Tonald Drump, Jul 22 '19 at 08:41
@TonaldDrump okay, thanks for the feed back, let us know how you solved it ;) — G-Cyrillus, Jul 22 '19 at 12:45

CSS Flexbox: element width

2 Answers2

Edit: