Почему свойство -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) работает только с товарами, которые являются flex items. Для того чтобы быть гибким элементом, его родительский элемент должен быть гибким контейнером (имеет отображаемое значение box/flexbox/flex). Родитель элемента .navigation_button имеет значение ul#nav_menu, а его тип отображения является блоком.

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

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

я должен предостеречь против полагаться на эти свойства будут доступны. Они взяты из спецификации Flexbox 2009 года и, вероятно, будут удалены в недалеком будущем. Если вам нужны они для поддержки старого мобильного браузера, убедитесь, что вы также предоставили современную версию для каждого свойства.

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; 
} 

Просматривается вы его в неподдерживаемый браузер?

Некоторые префиксы, специфичные для конкретного поставщика, могут отсутствовать (по сравнению с областью доступности браузера).

Это пример использования Новой школы для работы с 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; 
} 

Вы можете посмотреть на гибкую поддержку браузера на Caniuse

поднятого пользователя Cimmanon, Префиксальные селекторы не могут иметь отношения к вашему вопросу, но как-то, прочитав ваши заявления .css, я заметил, что вы не задали «базовую» декларацию CSS3 (dispaly: box; flex-box: 1;). Поэтому я подумал, что это объяснит вашу ситуацию, и это не так.