为什么-webkit-box-flex属性不起作用？

Question

我正在制作一个网站，并且我制作了一些按钮，并为它们添加了-webkit-box-flex属性。它运行良好。但是，当我向其中一个按钮添加下拉菜单时，-webkit-box-flex属性不再适用于它们，它不起作用。谁能告诉我发生了什么事？

这里是一个的jsfiddle：

http://jsfiddle.net/hGT6E/

*{ 
margin: 0px; 
padding: 0px; 
} 

h1{ 
font: bold 20px PrimaSans BT; 
} 

h2{ 
font: italic 14px PrimaSans BT; 
    } 

header, section, footer, aside, nav, article, hgroup, ul, li{ 
display: block; 
} 

#wrapper{ 
max-width: 1000px; 
margin: 20px 0px; 
display: -webkit-box; 
display: -moz-box; 
-webkit-box-orient: vertical; 
-moz-box-orient: vertical; 

-webkit-box-flex: 1; 
-moz-box-flex: 1; 
margin-left: auto ; 
margin-right: auto ; 
} 

#searchbox{ 
float: right; 
margin-bottom: 10px; 
} 

body{ 
width: 100%; 
margin: 0; 
display:-moz-box; 
-moz-box-pack: center; 
display:-webkit-box; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#ffffff), color-stop(1, #bababa)); 
background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#ffffff), color-stop(1, #bababa)); 
background-repeat: no-repeat; 
background-attachment: fixed; 
    } 

#navigation{ 
display: block; 
padding: 10px; 
margin: 5px; 
margin-bottom: 0px; 
-webkit-border-radius: 15px; 
width: 800px; 
height: 60px; 
display: -webkit-box; 
-webkit-box-orient: horizontal; 
display: -moz-box; 
-moz-box-orient: horizontal; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#ffffff), color-stop(1, #bababa)); 
background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#ffffff), color-stop(1, #bababa)); 

} 

#navigation li:hover ul{ 
display: block; 
} 

#navigation ul{ 
margin: 0px; 
padding: 0px; 
} 

#navigation li{ 
position: relative; 
float: left; 
list-style-type: none; 
} 

#navigation ul:after{ 
display: block; 
clear: both; 
visibility: hidden; 
} 

    #navigation li a{ 
text-decoration: none; 
display: block; 
color: black; 
border-right: 1px solid grey; 
padding: 10px 25px; 

} 

    #navigation ul ul{ 
position: absolute; 
border: 20px; 
left: 0px; 
width: 125px; 
display: none; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#ffffff), color-stop(1, #bababa)); 
    } 

    #navigation ul ul li{ 
border: 1px solid grey; 
width: 99%; 
-webkit-transition: background 2s 
    } 

    #navigation ul ul li:hover{ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#fffc01), color-stop(1, #ffde00)); 
    } 

#navigation ul ul li a{ 
border-right: none; 
    } 

    .navigation_button{ 
font: bold 18px PrimaSans BT; 
-webkit-box-flex: 1; 
width: 100px; 
padding: 10px; 
margin: 10px; 
text-align: center; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#ffffff), color-stop(1, #bababa)); 
background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#ffffff), color-stop(1, #bababa)); 
-webkit-border-radius: 10px; 
-webkit-transition: -webkit-transform 2s, opacity 2s, background 2s, scale 2s, 
    } 

    .navigation_button:hover{ 
-webkit-transform: scale(1.05); 
opacity: 1; 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#fffc01), color-stop(1, #ffde00)); 
background-image: -moz-gradient(linear, left top, left bottom, color-stop(0, `enter code here`#fffc01), color-stop(1, #ffde00)); 
} 

#main_section{ 
border: 1px solid grey; 
width: 750px; 
margin-left: 40px; 
margin-right: 30px; 
border-top: 0px; 
height: 800px; 
margin-bottom: 10px; 
-webkit-border-bottom-right-radius: 10px; 
-webkit-border-bottom-left-radius: 10px; 
background-color: #f1f1f1; 
-webkit-box-flex: 1; 
} 

.article_1{ 
border: 1px solid gray; 
background: white; 
-webkit-box-flex: 1; 
margin-left: 10px; 
margin-right: 10px; 
margin-top: 10px; 
padding: 10px; 
    } 

    .article_1_footer{ 
text-align: right; 
    } 

    #footer{ 
text-align: center; 
font: italic 12px Times New Roman 
    } 

谢谢！

Answer 1

该box-flex财产（现代名称：flex）只适用于项目是弹性项目。为了成为一个弹性项目，其父元素必须是一个柔性容器（具有box/flexbox/flex的显示值）。 .navigation_button元素的父亲是ul#nav_menu，其显示类型是块。

http://jsfiddle.net/hGT6E/1/

#nav_menu { 
    display: -webkit-box; 
    width: 100%; 
} 

我必须告诫不要依赖这些特性可用。它们来自2009年的Flexbox规格，并且可能在不久的将来会被放弃。如果您需要它们来支持旧的移动浏览器，请确保您还为每个媒体资源提供了现代版本。

Answer 2

像前面解释的Cimmanon，

#parent { 
    /* the parent has to be setup */ 
    display: -webkit-box; 
    display: -moz-box; 
    display: -o-box; 
    display: box; 
} 

#child { 
    /* for the child to behave correctly */ 
    -webkit-flex-box: 1; 
    -moz-flex-box: 1; 
    -o-flex-box: 1; 
    flex-box: 1; 
} 

你在不支持的浏览器中查看它？

某些-vendor特定的前缀可能会丢失（相对于您的浏览器可访问性范围）。

这是一些新的学校使用flex的示例方式（生成自bennettfeely.com/flexplorer）;

.flex-container { 
    display: -webkit-flex; 
    display: -moz-flex; 
    display: -ms-flex; 
    display: flex; 
    -webkit-flex-flow: row wrap; 
    -moz-flex-flow: row wrap; 
    -ms-flex-direction: row; 
    -ms-flex-wrap: wrap; 
    -ms-flex-flow: row wrap;  
    flex-flow: row wrap; 
} 

.flex-item { 
    -webkit-flex:1 auto; 
    -moz-flex:1 auto; 
    -ms-flex:1 auto; 
    flex:1 auto; 
} 

您可以通过用户Cimmanon提出看看Flex的浏览器支持上Caniuse

点，该前缀选择可能是不相关的你的问题，但不知何故，阅读你的CSS声明之后，我注意到你没有设置'basic'CSS3声明（显示：box; flex-box：1;）。所以我想了一会儿，这会解释你的情况，但事实并非如此。