CSS3 유연한 상자 모델 및 중첩 된 레이아웃

Question

이 문서에 설명 된대로 내가 CSS3 유연한 상자 모델과 조금 놀았 던

: 나는, 중첩 된 hbox에와 같은 것을 간단한 중 VBOX를 만들기 위해 노력하고 CSS 3 Flexible Box Model

:

<div class="vbox"> 
    <div>Header</div> 
    <div class="hbox"> 
     <div>Section 1</div> 
     <div>Section 2</div> 
     <div>Section 3</div> 
    </div> 
    <div>Footer</div> 
</div> 

그러나 hbox의 내용은 가로로 배치되지 않고 세로로 배치됩니다. 내가 뭘 잘못하고 올바르게하는 법? 감사.

Answer 1

.hbox 규칙의 display: box; 선언이 규칙의 display: block;에 의해 무시되는 문제가 있습니다.

1 확인합니다 display: box 재정의보다 구체적인 규칙 : 당신은 두 가지 옵션이 있습니다

.hbox { 
    display: -webkit-box !important; 
    -webkit-box-orient: horizontal; 
    -webkit-box-align: stretch; 
    display: -moz-box !important; 
    -moz-box-orient: horizontal; 
    -moz-box-align: stretch; 
    display: box !important; 
    box-orient: horizontal; 
    box-align: stretch; 
} 

Approach 1 working example here,이 방법의 단점은 당신이 CSS의 기본 특이성 규칙을 엉망으로하고 있다는 인 다른 장소에서 혼동을 일으킬 수 있습니다.

이 제거보다 구체적인 규칙에서 display: block :

.vbox > * { 
    -webkit-box-flex: 0; 
    -moz-box-flex: 0; 
    box-flex: 0; 
} 

Approach 2 working example here,이 방법의 주요 단점은 블록 레벨 요소가 될하기 위해 .hbox 또는 .vbox의 모든 직접 아이들을해야한다는 것입니다.