1

flexbox と box-ordinal-group を使用してテーブル セルを並べ替えようとしています (ユース ケース: コードを複製することなく、特定のテーブルのモバイルでのメディア クエリを介した別の順序)。

テーブルのセルを に設定しdisplay: block、テーブルをdisplay: flex(およびさまざまなベンダー接頭辞付きのバージョン) に設定するとうまくいくと思っていましたが、そのような運はありませんでした。

フレックスボックスから抜け出しているのは s の前後のtr/ではないかと思います。tbodytd

<table>
    <tr>
        <td class="cell1">Cell 1</td>
        <td class="cell2">Cell 2</td>
        <td class="cell3">Cell 3</td>
    </tr>
</table>

 

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: tableedでは機能<div>するが<table>. 残念ながら、IE7 をサポートする必要があるため、div だけを使用することはできません...

http://jsfiddle.net/GTL4e/

4

1 に答える 1

4

フレックス アイテムはフレックス コンテナーの子でなければならないので、はい、td 要素が問題を引き起こしています。table 要素に関連付けたスタイルを 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;
}

また、順序はフレックス順序とまったく同じではありません。order プロパティは 0 からインデックス付けを開始し、box-ordinal-group プロパティは 1 からインデックス付けを開始します。

于 2013-10-02T19:22:09.430 に答える