CSS3 Flexbox的响应为

Question

少校：添加codepen：http://codepen.io/anon/pen/srGwq

我开始处理Flexbox的一个非常具体的项目。随着文档频繁更换，我不会处理我的问题。

这里是我的html：

<div class="flexbox"> 
    <div class="middle">Middle</div> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div> 

而且我的CSS（无前缀lisibility）：

.flexbox { 
    display: box; 
    box-orient: horizontal; 
    box-align: start; 
} 

.middle { 
    box-flex-group: 1; 
    box-flex: 2; 
    box-ordinal-group: 2; 
} 

.left { 
    box-flex-group: 1; 
    box-flex: 1; 
    box-ordinal-group: 1; 
} 

.right { 
    box-flex-group: 1; 
    box-flex: 1; 
    box-ordinal-group: 3; 
} 

所以，结果是这样的：

________________________ 
| .left .middle .right | 
|______________________| 

随着媒体查询，我改变了方块组和方向组以获得移动上的结果：

____________ 
| .middle | 
| .left | 
| .right | 
|__________| 

所以，问题是，我需要把。左和.right在平板电脑上的一个左侧立柱垂直排列，就像这样：

____________________ 
| .left .middle | 
| .right   | 
|__________________| 

我试图把。左和.right到box-ordinal-group：1并将midmid设置为box-primary-group：2，但结果是.left和.right在左侧水平排列，我将它们垂直排列。

因为我不太了解Flexbox，所以您的经验值得欢迎。也许这是不可能的。

非常感谢，对于坏模式感到抱歉，我没有获得发布图片的可能性。

Answer 1

看到柔性流动性：

http://dev.w3.org/csswg/css3-flexbox/#flex-flow-property

伪代码：

@media $ {QUERY_TABLET {.flexbox弯曲流：行包}}

Answer 2

我在我的包装布局的github bredele上放一些例子。你应该通过弹性流（行/列换行）和弹性基础（初始最小宽度）来玩弄你想要的东西。

随着行包流量：

.flexbox { 
    display: -webkit-flex; 
    display:flex; 
    -webkit-flex-flow: row wrap; 
    flex-flow: row wrap; 
} 

.left, .right { 
    -webkit-flex: 1 50%; 
    flex: 1 50%; 
} 

.middle { 
    width:50%; 
} 

带柱包裹流量：

.flexbox { 
    /* the height has to be defined */ 
    height:400px; 
    display: -webkit-flex; 
    display:flex; 
    -webkit-flex-flow: column wrap; 
    flex-flow: column wrap; 
} 

.left, .right { 
    -webkit-flex: 1 50%; 
    flex: 1 50%; 
} 

.middle { 
    -webkit-flex: 1 100%; 
    flex:1 100%; 
} 

我认为第二个方案是，你在找什么。

奥利维尔:)