Я создаю заголовок веб-страницы. Я хочу, чтобы заголовок был отдельной строкой, которая включает в себя логотип и некоторые навигационные ссылки. Я считаю, что лучший, самый современный способ компоновки этого заголовка сегодня - с CSS3 flexbox, поэтому я хотел бы использовать его.
Я хотел бы, чтобы логотип был как можно дальше в контейнере гибких дисков, а остальные элементы навигации должны быть как можно более правыми. Этого можно легко достичь, плавая элементами слева и справа, но это не то, что я хотел бы сделать. Так что...
Как вы выровняете дочерние элементы контейнера flexbox с противоположными дальними краями основной оси?
Для дочерних элементов flexbox существует свойство, которое позволяет сделать это на поперечной оси align-self, но, похоже, на главной оси этого не происходит.
Лучший способ добиться этого - добавить дополнительный пустой элемент между логотипом и навигационными ссылками, чтобы служить в качестве разделителя. Но часть причины, по которой я предпочитаю использовать flexbox для этого заголовка, должна сочетаться с отзывчивым дизайном, и я не знаю, как заставить элемент интерполяции занимать все оставшееся пространство, независимо от ширины просмотра окно.
Вот где я сейчас стоял с надписью, упрощенной, чтобы включать только элементы, относящиеся к этой ситуации.
HTML
<ul>
<!-- Should be as far left as possible -->
<li id="main">Some Logo <span>Some tag line.</span></li>
<!-- Should be as far right as possible -->
<li>Home</li>
<li>Products</li>
<li>Price Sheet</li>
<li>Capabilities</li>
<li>Contact</li>
</ul>
CSS
ul {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
padding: 0;
margin: 0;
list-style: none;
}
li {
margin: 0 8px;
padding: 8px;
font-size: 1rem;
text-align: center;
font-weight: bold;
color: white;
background: green;
border: solid 4px #333;
}
#main { font-size: 2rem; }
#main span { font-size: 1rem; }
