导航菜单项灵活宽度答案

【问题标题】：Nav Menu Item Flexi Width导航菜单项灵活宽度
【发布时间】：2016-03-29 06:19:08
【问题描述】：

我想做一个像 Zillow.com 这样的导航菜单，当屏幕缩小时，每个项目的宽度也会缩小一点。这是怎么做到的？

这是我正在处理的page。

干杯

【问题讨论】：

寻求代码帮助的问题必须在问题本身中包含重现该问题所需的最短代码，最好是Stack Snippet。见How to create a Minimal, Complete, and Verifiable example
注明。我很抱歉。

标签： css nav

【解决方案1】：

嗯，从 Zillow.com 的 css 中检查，您可以在菜单项 <section class="nav-section nav-dropdown nav-section_wide" > ... </section> 上找到这些属性

css部分是：

.nav-top-container .nav-section {
    width: auto;
    height: 100%;
    -webkit-box-flex: 1 0 auto;
    -webkit-flex: 1 0 auto;
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
}

根据http://www.w3schools.com/cssref/css3_pr_flex.asp，flex 属性Let all the flexible items be the same length, regardles of its content。并且菜单部分的父 div 有 css：

max-width: 680px;
-webkit-flex-grow: 10;
-ms-flex-grow: 10;
-webkit-box-flex: 10;
-ms-flex-positive: 10;
flex-grow: 10;

所以它的最大宽度为 680px，但是当屏幕变小 10 时会改变宽度。请参考http://www.w3schools.com/cssref/css3_pr_flex-grow.asp

【讨论】：