flexbox CSS3 lồng nhau không hoạt động

Question

Có thể lồng các hộp flexbox không? Tôi đã lồng một flexbox ngang trong một flexbox ngang, và một flexbox dọc trong một flexbox dọc. Chỉ ngang trong các công trình ngang trong chrome và không làm việc trong firefox!

tôi đã tạo ra một jsfiddle đây: http://jsfiddle.net/NpkTL/1/

Nhưng đây là html:

<div id="A"> 
    <div id="A1">A1</div> 
    <div id="A2"> 
     <div id="A2-container"> 
      <div id="A2a">A2a</div> 
      <div id="A2b">A2b</div> 
     </div> 
    </div> 
</div> 
<div id="B"> 
    <div id="B1">B1</div> 
    <div id="B2"> 
     <div id="B2-container"> 
      <div id="B2a">B2a</div> 
      <div id="B2b">B2b</div> 
     </div> 
    </div> 
</div> 

và CSS:

* { 
    margin: 0; 
    padding: 0; 
    font-family: Arial;   
} 

#A { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    background: black; 
    width: 50%; 
    height: 100%; 

    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
} 

#A1 { 
background: brown; 
width: 100px; 
height: 80%; 
} 

#A2 { 
background: orange; 
height: 80%; 
-moz-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1;  
} 

#A2-container { 
    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: horizontal; 
    -webkit-box-orient: horizontal; 
    box-orient: horizontal; 
    width: 100%; 
    height: 100%;  
} 

#A2a { 
    background: red; 
    height: 80%; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;  
} 

#A2b { 
    background: blue; 
    width: 100px; 
    height: 80%; 
} 

#B { 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    background: gray; 
    width: 50%; 
    height: 100%; 

    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: vertical; 
    -webkit-box-orient: vertical; 
    box-orient: vertical; 

} 

#B1 { 
    background: brown; 
    width: 80%; 
    height: 100px; 
} 

#B2 { 
    background: orange; 
    width: 80%; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;  
} 

#B2-container { 
    display: -moz-box; 
    display: -webkit-box;  
    display: box; 
    -moz-box-orient: vertical; 
    -webkit-box-orient: vertical; 
    box-orient: vertical; 
    width: 100%; 
    height: 100%;  
} 

#B2a { 
    background: red; 
    width: 80%; 
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;  
} 

#B2b { 
    background: blue; 
    width: 80%; 
    height: 100px; 
} 

#A nằm bên tay trái, #B ở bên phải. #A và # A2-container là các hộp flex dọc và #B và # B2-container là các hộp xếp nằm ngang. Tôi thiết lập màu sắc cho các div khác nhau và thu nhỏ chúng ở mỗi cấp độ (chiều rộng cho chiều dọc và chiều cao cho chiều dọc) để làm cho nó dễ dàng hơn để xem những gì đang xảy ra. Có vẻ tốt bên trái (trong chrome!), Nhưng bên phải, # B2a nên điền theo chiều dọC# B2 (màu cam).

Tôi nhận thấy trong ví dụ này sẽ dễ sử dụng một flexbox với flex ở hàng giữa/cột 3, nhưng tôi tự động tải nội dung vào tương đương với # A2, điều này cũng xảy ra flexbox.

Answer 1

Mô hình hộp flex của Firefox hiện khá lỗi. Nếu bạn có bất kỳ hộp nào có vị trí cố định hoặc tuyệt đối, nó sẽ bị vỡ; cũng không có chiều rộng sẽ hoàn nguyên flexbox của bạn thành các hộp nội tuyến.

Answer 2

Hộp có thể được lồng vào nhau nhưng bạn phải loại bỏ vị trí của mình. Bạn hầu như không cần nó nữa anyway.

Bây giờ vấn đề vẫn còn hiện nay là các hộp xếp z-xếp chồng theo kinh nghiệm của tôi. Và nó cũng không thẳng về phía trước để định vị các mục flexbox trên trục chính khác nhau (ví dụ nếu tôi có một hàng và tôi muốn căn chỉnh một mục con ở bên trái và một ở bên phải, tôi sẽ phải chơi với lề và như vậy có thể trở nên đau đớn)

Ngoài ra kết quả có thể khá không nhất quán tùy thuộc vào các trình duyệt khác nhau.

Bằng mọi cách, tôi khuyến khích bạn sử dụng điều này: http://the-echoplex.net/flexyboxes/ Nó giúp ích rất nhiều.