1

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 不太了解，欢迎您体验。也许这是不可能的。

谢谢，对糟糕的架构感到抱歉，我还没有获得发布图片的机会。

4

2 回答 2

0

查看 flex-flow 属性：

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

像这样的伪代码：

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

于 2013-02-11T20:29:13.997 回答
0

我在我的github bredele的 wrap layout 上放了一些例子。你应该通过使用 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%;
}

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

奥利维尔:)

于 2013-02-12T14:30:20.973 回答