HTML一覧CSS一覧CSS一覧

フレックス

order 見た目の順番を変える

重要度2 / 5

意味

フレックス(またはグリッド)の子の、見た目の並び順を変える場合に使います。初期値は 0 です。数値が小さいほど先に来ます。

HTML の順番と画面の順番がずれます。読み上げや Tab 移動は、原則として HTML 側の順です。見た目だけ入れ替える用途に限ります。構造を直せるなら、HTML の順を直す方が追いやすいです。

コード

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML
<div class="row">
  <span class="later">HTMLでは1番目</span>
  <span>見た目では先</span>
</div>
CSS
.row {
  display: flex;
  gap: 0.4rem;
}
.row > span {
  background: #efeef8;
  padding: 0.4rem 0.65rem;
}
.later {
  order: 1;
}

プレビュー

ブラウザ対応

主要ブラウザの対応状況
ブラウザ対応
Chrome29〜
Firefox20〜
Safari9〜
Edge12〜
Chrome Android29〜
Safari iOS9〜

出典: MDN Web Docs(`@mdn/browser-compat-data`)