Можно ли вкладывать флексбоксы? Я вложил горизонтальный flexbox в горизонтальный flexbox и вертикальный flexbox в вертикальный flexbox. Только горизонтальное в горизонтальном работает в хроме и не работает в firefox!
Я создал jsfiddle здесь: http://jsfiddle.net/NpkTL/1/
Но вот html:
A1
A2a
A2b
B1
B2a
B2b
и 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, который также является flexbox .