最初に

今回はorderプロパティについて解説します。今現在自作ブログの制作にチャレンジしています。レスポンシブデザインを作る際に表示の順番が上手くできませんでした。
ここでorderプロパティを覚えて再チャレンジします。

orderプロパティについて

orderプロパティはflex gridコンテナの2つで使うことができます。

style.css


div{
    display:flex;
    display:grid ; /*両方に使える*/
}

orderプロパティの記述のイメージ

親要素にflexコンテナを指定し、子要素にorderプロパティを指定することで表示の順番を決めることができます。

style.css


div{
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-end; /*親要素にflexプロパティを指定*/
}

.box1{
    order:1;
}

.box2{
    order:2;
}

.box3{
    order:3;
}

.box4{
    order:4;
}

実際に制作したコード

前回作ったflexコンテナのコードを一部流用します。
子要素を横並びに配置します。orderプロパティは負の整数から優先的に並びます。そのあとは0と正の整数に続きます。

index.html

<!DOCTYPE html>
<html lang ="ja">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href = "style.css">
    </head>

    <body>

            <div class="container_1">
                <div class="item_box box_1" >アイテム1</div>
                <div class="item_box box_2">アイテム2</div>
                <div class="item_box box_3">アイテム3</div>
                <div class="item_box box_4">アイテム4</div>
                <div class="item_box box_5">アイテム5</div>
                <div class="item_box box_6">アイテム6</div>


            </div>
        
    </body>

</html>

style.css

.container_1{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    height: auto;
    background-color: chartreuse;

}

.item_box{
    background-color: aqua;
    border-style: solid;
    border-color: black;
    border-width: 4px;
    margin: 15px;
    padding: 15px;

}

.box_1{
    order: 3;
}

.box_2{
    order: -2;
}

.box_3{
    order: 2;
}

.box_4{
    order: 0;
}

.box_5{
    order: 1;
}

.box_6{
    order: -1;
}

参考画像