html - 导航栏布局使用 flexbox : How to position link or paragraph inline/next to menu icon

Question

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

在左侧，我希望页面标题位于菜单图标旁边。不知何故，我不知道该怎么做，在我的代码中，页面标题总是位于图标下方。使用我的代码的当前版本查看这个 fiddle (由于某种原因，图标的动画在 fiddle 中不起作用，但这对于演示我的问题并不重要):

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>