Текст в элементах списка с помощью flex: 1 перемещается на новую строку, есть ли способ избежать этого?

Question

Поскольку некоторые слова слишком длинные, они переносятся на новую строку.Если я уменьшу размер шрифта, шрифт станет слишком маленьким.Я мог бы нацелить элементы более длинными словами и придать им гибкость: 2, но тогда я потерял бы симметрию.

.wrapper {
    width: 960px;
    height: 100%;
    margin: 0 auto;
}
.navigation {
    height: 55px;
    width: 100%;
}
.navUl {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}
.navUl li {
    flex: 1;
    margin-right: 10px;
}

<div class="navigation">
    <div class="wrapper">
        <ul class='navUl'>
            <li>HOME</li>
            <li>ÜBER UNS</li>
            <li>UNSERE LEISTUNGEN</li>
            <li>PREISZUSAMMENSETZUNG</li>
            <li>NÜTZLICHES</li>
            <li>GALERIE</li>
            <li>VIDEOS</li>
            <li>BAUMSCHUTZGESETZ</li>
        </ul>
    </div>
</div>

Answer 1

Исходя из вашего примера, ограничение размера .wrapper (960px) слишком мало, чтобы вместить весь ваш список одной строкой.Вы можете использовать white-space:nowrap, но это не сохранит симметрию, и список будет переполнен оберткой.

Лучшим вариантом будет изменить .wrapper, чтобы придать ему большую ширину (это должно делать около 1500 пикселей), илижить с тем, что ваши вещи разбиваются на две строки.

.wrapper {
    width: 1500px;
    height: 100%;
    margin: 0 auto;
}
.navigation {
    height: 55px;
    width: 100%;
}
.navUl {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}
.navUl li {
    flex: 1;
    margin-right: 10px;	
}

<div class="navigation">
    <div class="wrapper">
        <ul class='navUl'>
            <li>HOME</li>
            <li>ÜBER UNS</li>
            <li>UNSERE LEISTUNGEN</li>
            <li>PREISZUSAMMENSETZUNG</li>
            <li>NÜTZLICHES</li>
            <li>GALERIE</li>
            <li>VIDEOS</li>
            <li>BAUMSCHUTZGESETZ</li>
        </ul>
    </div>
</div>