用于响应式的 CSS3 Flexbox答案

【问题标题】：CSS3 Flexbox for responsive用于响应式的 CSS3 Flexbox
【发布时间】：2012-10-13 22:15:31
【问题描述】：

MAJ : 添加密码笔 : 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 |
|______________________|

通过媒体查询，我更改了 box-ordinal-group 和 box-orient 以在移动设备上获得此结果：

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

所以问题是，我需要将 .left 和 .right 垂直对齐放在平板电脑的一个左列中，如下所示：

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

我尝试将 .left 和 .right 放入 box-ordinal-group:1 并将 .middle 设置为 box-orginal-group:2 但结果是 .left 和 .right 在左侧水平对齐，我希望它们垂直对齐。

由于我对 Flexbox 不太了解，欢迎您体验一下。也许这是不可能的。

谢谢，很抱歉架构不好，我还没有机会发布图片。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

我在github bredele 的环绕布局中放了一些示例。你应该通过使用 flex-flow（行/列换行）和 flex-basis（初始最小宽度）来得到你想要的。

使用换行流程：

.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%;
}

我认为第二种解决方案正是您要寻找的。p>

奥利维尔 :)

【讨论】：

【解决方案2】：

查看 flex-flow 属性：

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

伪代码如下：

@media $QUERY_TABLET { .flexbox {flex-flow: 换行} }

【讨论】：