フレックス
order 見た目の順番を変える
意味
フレックス(またはグリッド)の子の、見た目の並び順を変える場合に使います。初期値は 0 です。数値が小さいほど先に来ます。
HTML の順番と画面の順番がずれます。読み上げや Tab 移動は、原則として HTML 側の順です。見た目だけ入れ替える用途に限ります。構造を直せるなら、HTML の順を直す方が追いやすいです。
コード
HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。
<div class="row">
<span class="later">HTMLでは1番目</span>
<span>見た目では先</span>
</div>.row {
display: flex;
gap: 0.4rem;
}
.row > span {
background: #efeef8;
padding: 0.4rem 0.65rem;
}
.later {
order: 1;
}プレビュー
ブラウザ対応
| ブラウザ | 対応 |
|---|---|
| Chrome | 29〜 |
| Firefox | 20〜 |
| Safari | 9〜 |
| Edge | 12〜 |
| Chrome Android | 29〜 |
| Safari iOS | 9〜 |
出典: MDN Web Docs(`@mdn/browser-compat-data`)