ナビメニューアイテムフレキシ幅

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