首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >使用flexbox的菜单覆盖-如何同时获得两个html属性

使用flexbox的菜单覆盖-如何同时获得两个html属性
EN

Stack Overflow用户
提问于 2018-07-11 08:25:13
回答 1查看 162关注 0票数 0

我想把两个盒子放在一起。我使用的是pug、flexbox和scss。

我已经创建了一个codepen来向您展示代码。我已经尝试了一些flex-directions,flex-wrap等方法,但似乎不起作用。

谢谢这里有个链接:

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

pug:

代码语言:javascript
复制
#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 & 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:

代码语言:javascript
复制
@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;
    }
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-07-11 08:32:36

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

代码语言:javascript
复制
.container {
  display: flex;
}

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51275589

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档