Как равномерно распределить пункты меню с помощью CSS, если ширина и количество неизвестны?

Я много читал о равномерном распределении элементов с помощью css, но каждое решение, которое я нашел, требует, чтобы вы знали и определяли ширину и/или количество распределяемых элементов.

У меня есть контейнер фиксированной ширины — здесь может быть любое количество элементов li автоматической ширины, которые нужно равномерно распределить по родительскому элементу слева направо.

Вот моя разметка, за исключением того, что может быть любое количество вкладок с текстом любой длины.

<ul class="tabs">
     <li class="tab active" id="tab-1"><span class="tab-title">Tab 1</span></li>
     <li class="tab " id="tab-2"><span class="tab-title">Tab 2</span></li>
     <li class="tab " id="tab-3"><span class="tab-title">Tab 3</span></li>
     <li class="tab " id="tab-4"><span class="tab-title">Tab 4</span></li>
</ul>

Итак, можно ли реализовать равномерное распределение с помощью css, когда количество элементов и ширина являются динамическими?

Кажется, это очевидная вещь, которую нужно сделать — черт побери, CSS!