Допустим, у меня есть навигация, которая использует два контейнера flexbox. Благодаря свойству flex-grow навигация растягивается, чтобы соответствовать основной оболочке (в нашем случае это ширина 100%).
HTML:
<!DOCTYPE html>
<html lang="en">
<body>
<div id="main_navigator">
<a id="main_navigator_logo" src="/"></a>
<ul id="main_navigator_r1">
<li>
<a class="main_nav_btn">BTN 1</a>
</li>
<li>
<a class="main_nav_btn">BTN 2</a>
</li>
<li>
<a class="main_nav_btn">BTN 3</a>
</li>
<li>
<a class="main_nav_btn">BTN 4</a>
</li>
<li>
<div id="main_navigator_s1"></div>
</li>
<li>
<div id="main_navigator_regbox"></div>
</li>
</ul>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
#main_navigator {
position: fixed;
display: flex;
flex-direction: row;
background-color: black;
width: 100%;
}
#main_navigator_logo {
width: 416px;
height: 120px;
display: block;
background-color: white;
}
#main_navigator_r1 {
display: flex;
flex-direction: row;
align-items: center;
flex-grow: 1;
flex-shrink: 1;
margin-top: 0px;
height: 96px;
list-style-type: none;
}
#main_navigator_r1 li {
flex-grow: 1;
flex-shrink: 1;
}
#main_navigator_r1 li .main_nav_btn {
color: white;
display: block;
height: 100%;
font-family: "nexa_bold";
font-size: 0.8em;
text-decoration: none;
}
#main_navigator_s1 {
width: 2px;
height: 30px;
background-color: #B28039;
}
#main_navigator_regbox {
background-color: red;
width: 50px;
height: 5px;
}
Как видно из кода, есть основной контейнер со свойством flexbox, который содержит логотип (элемент <a>) и навигацию (элемент <ul>, который содержит свойство flexbox).
Видно, что левое поле первого элемента остается постоянно фиксированным, поэтому поле (или отступ) между логотипом и элементом остается неизменным независимо от масштабирования, тогда как другие поля между элементами навигации увеличиваются вместе с окном просмотра при положительном масштабировании.
Вы можете просмотреть визуализацию здесь .
Можно ли сделать так, чтобы все элементы навигации имели одинаковое автоматическое поле?
Я пытался поместить логотип в контейнер <ul> - но из-за некоторого автоматического изменения размера он исчез (размер логотипа должен оставаться неизменным, а правое поле не должно). Можно ли таким образом заворачивать логотип в контейнер?
Спасибо!