While I have a feeling this question might have been asked before, my search has turned up no similar issues.
I am currently working on styling a menu bar using a standard bootstrap row and columns setup (flexbox). The menu is dynamically generated by WordPress in PHP, rather than being hardcoded in HTML. Due to the nature of the website, the menu items can vary in number - from 4 items at one time to 7 at another. Because these items are subject to change, I cannot predict the exact width of each item.
My goal is to create a row with one column for each menu item so that they sit side by side and fill the entire width of the row. In bootstrap, I could easily achieve this by using col, which would make each column equal width.
<ul class="row">
<li class="col">Menu Item 1</li>
<li class="col">Menu Item 2 with much longer menu title</li>
<li class="col">Menu Item 3 with long title</li>
<li class="col">Menu Item 4</li>
<li class="col">Menu Item 5</li>
</ul>In the given example with 5 items, each column is 20% wide. However, this doesn't suit my needs as the length of menu items varies. I wish to have longer items occupy more space and shorter ones less, ideally resulting in widths of 30% and 10% instead of uniform 20%.
Is there a way to accomplish this using flexbox? I'm also open to alternatives like using basic divs with float: left, but my issue with those methods so far is that they do not naturally expand to fill the full width of the row without specifying a fixed width.
Note: I understand that this functionality resembles that of a table. However, I prefer not to use a table because I need the menu items to be styled differently on various devices - for example, on mobile, I want each menu item to take up 100% width. Achieving this with a table would be challenging, whereas flexbox makes it straightforward.