Question

我正在尝试使用flexbox构建响应式导航。我的桌面版看起来很好。但是当它进入手机媒体查询时，我希望更改项目的顺序。我希望导航链接上方的徽标位于其自己的行上，并且下方的4个导航链接在中心对齐。我已经尝试了所有的东西，所以我来到堆栈溢出的伟大人物寻求帮助。

链接到代码：

http://codepen.io/Davabo/pen/EKNBMz

* {margin:0; padding:0; font-weight: normal;}

$phone: 480px;

@mixin phone {
  @media (max-width: #{$phone}) {
    @content;
  }
}


.menu{

    display:flex;
    height: auto;
    max-width: 100%;
    a{text-decoration:none;color: black;padding:20px;}

    & > div {

      flex: 2;
      font-size: 20px;
      text-align: center;
      padding-top: 30px; 
    }

    .logo {
      width: 100%;
      flex: 1;
      padding-top: 40px; 
      text-align: center;
    }

            @include phone {

                .logo {

                 background: pink;
                 text-align: center;
                 flex: 5;
                 flex-grow: 5;
                } 

                .nav1, .nav2 {
                  flex-basis: 100%;
                  width: 100%;

                }
            }

  }

我附上了我想要的手机导航图：

http://prntscr.com/afwt0g

非常感谢您的帮助！

Answer 1

您需要在项目上使用order和flex-grow属性的组合，例如

@media screen and {max-width: 480px){
    .menu{flex-wrap: wrap;}
    .logo{order: 1; flex-grow: 2;}
    .nav1{order: 2; flex-grow: 1;}
    .nav2{order: 3; flex-grow: 1;}
}

Order重新排列Flex容器中项目的顺序。

Flex-grow计算元素的大小与灵活容器中的兄弟元素相比

当容器宽度强制它时，容器上的

wrap强制要包装的项目

以下是指向良好的弹性箱资源的链接：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox响应式导航问题

1 个答案: