独立安排Flexbox元素

Question

我想安排两个由flexbox设置样式的元素，

1）； 站点品牌包装器 ；目前处于居中状态，我想独立于 site-nav 。换句话说，将site-brand-wrapper移到最左边，将 site-nav 移到最右边，直到打开并稍微向左移动。

2） site-nav; ，该属性设置为右侧，并在打开侧边栏元素时缩小。

---

当前，站点品牌包装器居中并固定在右侧的 site-nav 中。当 site-nav 缩小时，它们都会移动。

Flexbox - justify specific element

类似于此问题和答案，只有我没有容器元素并且无法创建一个。

// Menu
// --------------------------------------------------
.site-brand-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-self: flex-start; 

}
.site-nav-toggle {
  display: flex;
  justify-content: flex-end;
  align-self: flex-end;
}

.site-nav {
 // flex-grow: 1;
  +mobile() {
    transform: translateY(10px);
  }
}
y
.menu-item-active a {
  background: $black-deep;
  color: $whitesmoke;
}

.menu {
  float: left;
  margin: 0;

  +mobile() {
    margin: 10px 0;
    padding: 0;
  }

  br { display: none; }

  .menu-item {
    margin: 0;
    +mobile() {
      show();
      margin-top: 5px;
    }