> CSS > orderでflexブロック内のアイテムの並び順を任意に変更する方法
orderでflexブロック内のアイテムの並び順を任意に変更する方法

orderでflexブロック内のアイテムの並び順を任意に変更する方法

  • 投稿日:2021/10/22 |最終更新:2021/10/26
  • CSS
  • flex

display: flex;を適用したflexコンテナーの中のflexアイテムの並び順は、通常は設定された方向にhtmlの記述が早い順に並びます。
flexアイテムにorderで並び順を設定すると、htmlの記述順を問わずにorderで指定した並び順で表示することができます。

orderを設定してflexアイテムの並び順を変更してみる

プレビュー

1
2
3
4

通常は1→2→3→4という順番で表示されるはずが、4にorder: -1;を設定しているため、4が一番左に表示されます。

解説

orderの初期値は0で、負→0→正の数順に表示されます。
↑の例では「4」のブロックにだけ「-1」を設定しているので、「4」が一番左に配置されています。

HTML例

<div class="flex-box">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
</div>

CSS例

.flex-box{display: flex;}
.flex-item{
    width: 100px;
    height: 100px;
    display: flex;
    margin: 10px;
    align-items: center;
    justify-content: center;
    background: #eee;
    color: #000;
    font-size: .8em;
}
.flex-item:nth-child(4){
    order: -1;
}

まとめ

orderプロパティは「PCではこの順番、スマホではこの順番」などのように、flexアイテムの順序を入れ替えて表示したい時などによく使います。
便利なプロパティなのでぜひ活用していきたいですね。

この記事が気に入ったらシェアしてください

関連記事

コピペで使えるCSSだけでつくる矢印・三角形

コピペで使えるCSSだけでつくる矢印・三角形

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

CSSだけで 電話番号のリンクを PC・タブレット時には無効化し スマートフォン時にのみ発信させる方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

同じSVGを画面内で複数回使用してCSSで色やサイズを変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

flex-directionでflexブロック内のアイテムの並び方を変更する方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Youtubeの埋め込み用タグをレスポンシブに対応させる方法

Google Chromeでtransformを使っている時、png画像がぼやける場合の対処法

Google Chromeでtransformを使っている時、png画像がぼやける場合の対処法

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)