Flexbox 响应式导航问题

Question

我正在尝试使用 flexbox 构建响应式导航。我的桌面版看起来不错。但是当它进入 phone 媒体查询时，我希望项目的顺序发生变化。我希望导航 links 上方的徽标独占一行，而下方的 4 个导航 links 居中对齐。我已经尝试了所有方法，所以我向 stack overflow 的大牛们寻求帮助。

link 编码：

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%;

                }
            }

  }

我附上了我想要的 phone 导航：

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-grow 计算出一个元素与其在 flex 容器中的兄弟姐妹相比的大小

容器上的

wrap 在容器宽度强制时强制项目换行

这里是 link 一个很好的 flexbox 资源：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox 响应式导航问题

Flexbox Responsive Navigation Issue

css

nav

flexbox