Question

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

这是我正在研究的page。

干杯

Answer 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

导航菜单项目灵活宽度

1 个答案: