Может ли flexbox быть вложенным? Я вложил горизонтальный flexbox в горизонтальный flexbox и вертикальный flexbox в вертикальном flexbox. Только горизонтальный в горизонтальном режиме работает в хроме и не работает в firefox!
Я создал jsfiddle здесь: http://jsfiddle.net/NpkTL/1/
Но вот 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>
и 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 слева, #B - справа. #A и # A2-контейнер представляют собой вертикальные гибкие коробки, а #B и # B2-контейнер представляют собой горизонтальные гибкие коробки. Я устанавливаю цвета для разных div и уменьшаю их на каждом уровне (ширина по вертикали и высоте по вертикали), чтобы было легче видеть, что происходит. Он выглядит отлично слева (в хроме!), Но справа, # B2a должен вертикально заполнять # B2 (оранжевый).
Я понимаю, что в этом примере было бы проще использовать один flexbox с flex в средней строке/столбце из 3, но я динамически загружаю содержимое в эквивалент # A2, что также может быть a flexbox.