Sass 使用flexbox的菜单覆盖-如何并排获取两个html属性

我想把两个箱子并排拿过来。我用的是帕格、flexbox和scss

我已经创建了一个代码笔来向您显示代码。我已经尝试了一些关于弯曲方向、弯曲包裹等的方法，但似乎没有成功

谢谢这里是链接：

帕格：

---

您的问题是您没有将flex应用于容器。添加以下内容：

.container {
  display: flex;
}

---

更新您的链接

是！绝对正确。我现在改了。放置：。容器。菜单内容现在运行良好！谢谢另外，.菜单没有占据全部高度？我使用的是高度：100vh和尝试高度：100%

@mixin element($element){
  &__#{$element}{
    @content;
  }
}

@mixin modifier($modifier){
  &--#{$modifier}{
    @content;
  }
}

ul{
  list-style-type: none;
}

.menu{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;

  width: 100%;
  height: 100%;

  background-color: #2D2D2D;

  .menu__content{
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: space-around;
  }

  @include element('list'){
    border: 1px solid red;
    display: flex;
    flex-direction: column;
    width: 40%;

    @include modifier('top'){
      // height: 100vh;
    }

    @include modifier('bottom'){
      // height: calc(30vh + 70px);

      .menu__link{
        margin-bottom: 0;
        padding: 5px;
        span{
          color: white;
          font-size: .9rem;
        }
        .link-anchor{
          color: #cfcfcf;
          font-size: 0.8rem;
          text-transform: unset;

          &:last-of-type{
            margin-top: 10px;
            display: block;
          }
        }
      }
    }
  }

  @include element('link'){
    margin-bottom: 1.875rem;
    margin-left: 40px;
    &:last-of-type{
      margin-bottom: 0;
    }
    .link-anchor{
      color: #cfcfcf;
      font-size: 1rem;
      letter-spacing: 0.175em;
      text-transform: uppercase;
      transition: all 0.6s;

      @media screen and(orientation: landscape) and (max-width: 815px){
        font-size: 1.2rem;
      }
    }
    .active{
      color: yellow;
    }
  }
}

.container {
  display: flex;
}