【CSS】order - 要素を並べる順序

CSSのorderプロパティについて解説します。

検証環境

CSS

macOS

14.1

order

orderは“フレックスコンテイナー・グリッドコンテイナーの子要素の順序”のプロパティです。

基本構文

order: 値;

サンプル

サンプル１

sample.html

<style>
div {
    display: flex;
    background: lightgray;
    flex-flow: row wrap;
}
p {
    border: 1px solid black;
    text-align: center;
}
.p1 {
    ___ih_hl_start
    order: 4;
    ___ih_hl_end
}
.p2 {
    ___ih_hl_start
    order: 5;
    ___ih_hl_end
}
.p3 {
    ___ih_hl_start
    order: 1;
    ___ih_hl_end
}
.p4 {
    ___ih_hl_start
    order: 2;
    ___ih_hl_end
}
.p5 {
    ___ih_hl_start
    order: 3;
    ___ih_hl_end
}
</style>

<div>
    <p class="p1">HTML</p>
    <p class="p2">CSS</p>
    <p class="p3">JavaScript</p>
    <p class="p4">WebBrowser</p>
    <p class="p5">Server</p>
</div>

プレビュー