Flexbox 响应式导航问题答案

【问题标题】：Flexbox Responsive Navigation IssueFlexbox 响应式导航问题
【发布时间】：2016-03-16 10:29:50
【问题描述】：

我正在尝试使用 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

非常感谢您的帮助！

【问题讨论】：

标签： css flexbox nav

【解决方案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 在容器宽度强制时强制项目包裹

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

【讨论】：