Чтобы понять, почему ваши элементы навигации обертываются, вам нужно понять, как работает flexbox.Я собираюсь кратко объяснить это простыми словами, но ниже вы найдете ссылку с полным и точным объяснением.
Первоначально вы установили один элемент на 100% ширины, а все остальное оставили по умолчанию.ценности.Здесь используются следующие важные значения:
В вашем случае очевидно, что у нас переполнение, поскольку один элемент установлен на width:100%, а другой на автоматический, НО механизм flexbox сократит ваш элемент и будетраспределите отрицательное свободное пространство 1 для гибких элементов во избежание переполнения.
В вашем случае первый элемент h1 больше не может сжиматься, так как егоwidth равно его минимальному содержанию, поэтому только ваш элемент .center и навигация уменьшатся, и это произойдет независимо от размера браузера, потому что у нас всегда будет отрицательное свободное пространство , так как *Элемент 1037 * имеет значение width:100%.
Если, например,вы устанавливаете flex-shrink:0 на элемент nav, у вас не будет обтекания, потому что вы отключите сжатие для этого, и все отрицательное свободное пространство будет добавлено к элементу .center (это может быть исправлением, но нелучший)
.header {
background: #ccc;
display: flex;
justify-content: space-between;
}
h1 {
font-size:11px;
}
.center{
width:100%;
background: lightblue;
text-align: center;
}
.nav {
flex-shrink:0;
}
div a{
background: tomato;
}
<div class="header">
<h1>Title</h1>
<div class="center">
<h1>
TEST TEXT
</h1>
</div>
<div class="nav">
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</div>
</div>
Если вы отключите коэффициент сжатия для всех элементов , у нас будет переполнение , поскольку отрицательное свободное пространство не будет распределено:
.header {
background: #ccc;
display: flex;
justify-content: space-between;
}
h1 {
font-size:11px;
}
.center{
width:100%;
background: lightblue;
text-align: center;
flex-shrink:0;
}
.nav {
flex-shrink:0;
}
div a{
background: tomato;
}
<div class="header">
<h1>Title</h1>
<div class="center">
<h1>
TEST TEXT
</h1>
</div>
<div class="nav">
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</div>
</div>
Если вы установите flex-wrap:wrap для контейнера, мы больше не будем рассматривать отрицательное свободное пространство и сжатие, как будто недостаточно места, которое будут обертывать элементы:
.header {
background: #ccc;
display: flex;
justify-content: space-between;
flex-wrap:wrap;
}
h1 {
font-size:11px;
}
.center{
width:100%;
background: lightblue;
text-align: center;
}
div a{
background: tomato;
}
<div class="header">
<h1>Title</h1>
<div class="center">
<h1>
TEST TEXT
</h1>
</div>
<div class="nav">
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</div>
</div>
Чтобы исправить все это, вам нужно избегать свободного отрицательного пространства и сделать общую ширину не превышающей ширину контейнера.Вместо использования width:100% вы можете рассмотреть свойство flex-grow, которое позволит элементу расти, чтобы заполнить свободное пространство.
.header {
background: #ccc;
display: flex;
justify-content: space-between;
}
h1 {
font-size:11px;
}
.center{
flex-grow:1;
background: lightblue;
text-align: center;
}
div a{
background: tomato;
}
<div class="header">
<h1>Title</h1>
<div class="center">
<h1>
TEST TEXT
</h1>
</div>
<div class="nav">
<a>A Link</a>
<a>Another Link</a>
<a>A Third Link</a>
</div>
</div>
Вот хорошая ссылка для лучшего понимания алгоритма flexbox с учетом всех свойств: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax
(1) Отрицательное свободное пространство : у нас есть отрицательное свободное пространство, когда естественный размер элементов увеличивается на больше, чем доступное пространство в гибком контейнере.