为什么不使用 Flexbox 对 HTML 表格行进行排序？答案

【问题标题】：Why Won't HTML Table Rows Sort Using Flexbox?为什么不使用 Flexbox 对 HTML 表格行进行排序？
【发布时间】：2017-12-07 22:59:48
【问题描述】：

此代码不会根据需要将行的显示重新排序为 c、b、a。将table 和tr 更改为divs（并删除tds）确实有效。有谁知道为什么，或者有一种方法可以保留语义 HTML 表格并使用 flexbox 进行排序？

#results { display: flex; }
#rowa { order: 3; }
#rowb { order: 2; }
#rowc { order: 1; }

<table id="results">
    <tr id="rowa"><td>a</td></tr>
    <tr id="rowb"><td>b</td></tr>
    <tr id="rowc"><td>c</td></tr>
</table>

【问题讨论】：

【解决方案1】：

这将不起作用，因为在 table 和 tr 之间存在一个 tbody，您可以自己添加它，或者它将作为匿名添加。

所以在这种情况下，不是tr 成为弹性项目，而是tbody。

将tbody 添加到您的规则中，它将起作用

#results tbody { display: flex; }
#rowa { order: 3; }
#rowb { order: 2; }
#rowc { order: 1; }

<table id="results">
    <tr id="rowa"><td>a</td></tr>
    <tr id="rowb"><td>b</td></tr>
    <tr id="rowc"><td>c</td></tr>
</table>

更新

基于 table 会垂直布局这一事实，而要在 Flexbox 中实现这一点，我们需要添加 flex-direction: column

#results tbody { display: flex; flex-direction: column; }
#rowa { order: 3; }
#rowb { order: 2; }
#rowc { order: 1; }

<table id="results">
    <tr id="rowa"><td>a</td></tr>
    <tr id="rowb"><td>b</td></tr>
    <tr id="rowc"><td>c</td></tr>
</table>

【讨论】：

有趣的是输出不在单独的行上。我想知道 flexbox 是否不能很好地与“老式”HTML 表格配合使用。
@GregCatalano 不，它没有，但如果你期望像布局一样的行，你需要添加 flex-direction: column（因为 Flexbox 默认为 row）...更新我对第二个样本的回答
谢谢。如果您有多个列，则单元格似乎会因为 flexbox 而失去垂直对齐。这个问题当然是题外话了。但是我使用 flexbox 对表格行进行排序（并保持表格形式）的目标似乎遥不可及。 jsfiddle.net/GregCatalano/2efaqxwn/2
@GregCatalano 这是正确的。一旦你设置了display: flex，它们就不再是表格数据元素，而是开始成为弹性元素。有办法让 flex 元素的行为类似于表格，尽管这是一个全新的问题。如果你想使用 Flexbox，我还建议不要使用 table 元素，因为你可能会遇到跨浏览器问题