Question

我正在尝试使用flexbox和box-ordinal-group对表格单元格进行重新排序（用例：通过移动设备上的媒体查询针对特定表格执行不同的顺序而不复制代码）。

我原本以为将表格单元格设置为display: block，将表格设置为display: flex（以及各种供应商前缀版本）就可以了，但没有这样的运气。

我想知道tr / tbody周围的td / <table> <tr> <td class="cell1">Cell 1</td> <td class="cell2">Cell 2</td> <td class="cell3">Cell 3</td> </tr> </table>是否会突然出现在Flexbox中。

table {
    display: -webkit-box;
    -webkit-flex-direction: column;
    display: -moz-box;
    -moz-flex-direction: column;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}

td {
    display: block;
}

.cell1 {
    -webkit-box-ordinal-group: 3;
    -moz-box-ordinal-group: 3;
    -ms-flex-order: 3;
    -webkit-order: 3;
    order: 3;
}

display: table

以下是一个示例，显示它适用于<div> ed <table>，而不是{{1}}。不幸的是，我不能只使用div，因为我必须支持IE7 ......

http://jsfiddle.net/GTL4e/

Answer 1

Flex项目必须是Flex容器的子项，所以是的，td元素正在破坏你的东西。只需将与表元素相关联的样式切换到tr元素，就可以了。

http://jsfiddle.net/GTL4e/1/

tr {
    display: -webkit-box;
    -webkit-flex-direction: column;
    display: -moz-box;
    -moz-flex-direction: column;
    display: -ms-flexbox;
    -ms-flex-direction: column;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
}

此外，订单与flex-order不完全相同。 order属性开始用0索引，而box-ordinal-group属性开始用1索引。

表格单元格上的flexbox box-ordinal-group

1 个答案: