使用弹性框的导航栏布局:如何内联/菜单图标旁边定位链接或段落

Question

我正在处理页面顶部的导航栏。我正在使用flexbox来定位导航栏的元素;在左侧，我有一个动画汉堡菜单图标以及页面标题，在右侧我有几个链接。图标和页面标题包含在<div>中，链接包含在另一个<div>中。使用flexbox、flex-direction: row和justify-content: space-between，我分别放置在页面的相对两侧。

在左侧，我希望页面标题位于菜单图标旁边。不知何故，我无法弄清楚这样做，在我的代码中，页面标题始终位于图标下方。请参阅当前版本的代码小提琴(由于某种原因，图标的动画在小提琴中不起作用，这对于演示我的问题并不重要(：

function changeicon(x) {
x.classList.toggle("change");
}

.flex {
display: flex;
}
.flex-menu {
flex-direction: row;
justify-content: space-between;
}
.nav {
left: 0;
padding: 5px;
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0.4em;
}
/* ----- Nav/Menu Icon  --------------------------------------------- */
.icon-container {
display: inline;
cursor: pointer;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 3px;
background-color: black;
margin: 6px 0;
transition: all 400ms ease;
}
/*--- Rotation of the first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-6px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-6px, -8px);
}

<div class="nav flex flex-menu">
<div class="icon-container" onclick="changeicon(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
<a href="">Page Title</a>
</div>
<div>
<a href="" target="blank">Link1</a>
<a href="" target="blank">Link2</a>
<a href="" target="blank">Link3</a>
</div>
</div>

如何在左侧的<div>中设置元素，以便它们彼此相邻显示？

Answer 1

将标题放在单独的div 中，然后向左推margin-right: auto

function changeicon(x) {
x.classList.toggle("change");
}

.flex {
display: flex;
}
.flex-menu {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.nav {
left: 0;
padding: 5px;
box-sizing: border-box;
width: 100%;
position: fixed;
top: 0.4em;
}
/* ----- Nav/Menu Icon  --------------------------------------------- */
.icon-container {
display: inline;
cursor: pointer;
}
.page-title {
margin-right: auto;
padding: 5px;
}
.bar1,
.bar2,
.bar3 {
width: 35px;
height: 3px;
background-color: black;
margin: 6px 0;
transition: all 400ms ease;
}
/*--- Rotation of the first bar */
.change .bar1 {
transform: rotate(-45deg) translate(-6px, 6px);
}
/* Fade out the second bar */
.change .bar2 {
opacity: 0;
}
/* Rotate last bar */
.change .bar3 {
transform: rotate(45deg) translate(-6px, -8px);
}

<div class="nav flex flex-menu">
<div class="icon-container" onclick="changeicon(this)">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="page-title">
<a href="">Page Title</a>
</div>
<div>
<a href="" target="blank">Link1</a>
<a href="" target="blank">Link2</a>
<a href="" target="blank">Link3</a>
</div>
</div>