Question

我试图并排放置两个盒子。我正在使用pug，flexbox和scss。

我创建了一个Codepen来向您显示代码。我已经尝试了一些使用flex-directions，flex-wrap等方法的东西，但是似乎没有用。

谢谢，这里是链接：

https://codepen.io/harp30/pen/vaYwKW?editors=1000

pug：

#js-menu.menu
  .menu__content
    .container
     ul.menu__list.menu__list--top
      li.menu__link
       a.link-anchor.active About us
      li.menu__link
       a.link-anchor Our Team
      li.menu__link
       a.link-anchor areas of practice
      li.menu__link
       a.link-anchor news &amp; media

     ul.menu__list.menu__list--bottom.u-display-none-landscape-xs
      li.menu__link.u-margin-bottom--small
       a.link-anchor <span>Telephone:</span> 
        | 1 905 800 7000 
      li.menu__link.u-margin-bottom--small
       a.link-anchor <span>Admin Email:</span> poonam@okok.com 
      li.menu__link
       a.link-anchor <span>Address:</span> 0 gore rd Road East, 
         | Suite 90 Mississauga, ON Lvk 000
      li.menu__link
       a.link-anchor Harp Designs

scss：

@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;
    }
  }
}

Answer 1

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

.container {
  display: flex;
}

更新到您的链接https://codepen.io/harp30/pen/vaYwKW?editors=1100

带有flexbox的菜单叠加层-如何并排获取两个html属性

1 个答案: