Horizontal List That Evenly Divides Remaining Space via CSS

Question

I have a web app that uses Bootstrap. In this web app, I have a dynamically created list of items. An example of the items that are created is presented here:

<ul class="list-inline">
  <li>home</li>
  <li>contact me</li>
  <li>a longer list item</li>
</ul>

When this gets rendered, its something like this:

+------------------------------------------------+
| +------+------------+--------------------+     |
| | home | contact me | a longer list item |     |
| +------+------------+--------------------+     |
+------------------------------------------------+

However, I'd like to figure out a way to make the items fill the width of the screen and be evenly distributed. In other words, I kind of want it like this:

+-----------------------------------------------------------------------------------+
| +--------------------------+--------------------------+--------------------------+     |
| |           home           |        contact me        |    a longer list item    |     |
| +--------------------------+--------------------------+--------------------------+     |
+-----------------------------------------------------------------------------------+

In the example above, each item is the same width and the text is centered within each cell. How do I do this in Bootstrap?

Thank you!

Answer 1

You can use display: flex

.list-inline {
  display: flex;
}

.list-inline li {
  flex: 1;

  text-align: center;
}