-webkit-box-flex 속성이 왜 작동하지 않습니까?

Question

웹 사이트를 만들고 있는데, 버튼 몇 개를 만들고 -webkit-box-flex 속성을 추가했습니다. 괜찮 았어. 그러나 단추 중 하나에 드롭 다운 메뉴를 추가하면 -webkit-box-flex 속성이 더 이상 적용되지 않고 작동하지 않습니다. 아무도 무슨 일이 일어나는지 말해 줄 수 있니?

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 
    } 

감사 : 여기

는 jsfiddle입니다!

Answer 1

box-flex 특성 (현대 이름 : flex)는 단지 플렉스 항목있는 항목에서 작동합니다. 플렉스 항목이 되려면 상위 항목이 플렉스 컨테이너이어야합니다 (표시 값은 box/flexbox/flex 임). .navigation_button 요소의 상위 항목은 ul#nav_menu이고 표시 유형은 block입니다.

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

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

내가 사용할 수있는 이러한 속성에 의존에 대해주의해야합니다. 그것들은 2009 Flexbox 사양에서 왔으며 그리 멀지 않은 미래에 삭제 될 것입니다. 기존 모바일 브라우저를 지원해야하는 경우 각 속성에 최신 버전을 제공해야합니다.

Answer 2

등

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

당신은 지원되지 않는 브라우저에서보고, Cimmanon으로 앞에서 설명한?

일부 공급 업체 고유의 접두사가 없을 수도 있습니다 (브라우저 액세스 가능성 범위와 관련이 있음).

이것은 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 제기 Caniuse

포인트에 플렉스 브라우저 지원에 대해 살펴 수 있지만

어떻게 든 당신의 .CSS 선언을 읽은 후, '기본'CSS3 선언 (dispaly : box, flex-box : 1;)을 설정하지 않은 것으로 나타났습니다. 그래서 잠깐 생각하면 상황을 설명 할 수 있다고 생각했습니다.