ブロックコンテナ内のdivでorderプロパティが機能しないのはなぜですか？

Question

私はdisplay: blockと1つの容器を持っています。それらの中に私は3つのdivを持っています。今では私がコード化したようにそれらを注文することはできませんでしたが、私のコンテナdivはdisplay: blockであり、display: flexではないので不可能です。

私の場合、3つのdivsを1つずつ下にします。それが私がブロックを置く理由です。

ここにJSFIDDLEのデモンストレーションがありますが、私は自分の問題を解決しようとしました。 https://jsfiddle.net/u441j2rv/1/

HTML

<div id="blockContainer"> 
    <div>Block A</div> 
    <div>Block B</div> 
    <div>Block C</div> 
</div> 

CSS

#blockContainer{ 
    display: block; 
} 
#blockContainer div:nth-of-type(1){ 
    background:red; 
    -webkit-order: 3; 
    order:3; 
} 
#blockContainer div:nth-of-type(2){ 
    background:green; 
    -webkit-order: 1; 
    order: 1; 
} 
#blockContainer div:nth-of-type(3){ 
    background:blue; 
    order: 2; 
    order: 2; 
} 

Answer 1

orderはdisplay: flexの関数です。したがって、以下のようにコードを更新する必要があります。

#blockContainer { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
#blockContainer div { 
 
    flex: 1; 
 
} 
 
#blockContainer div:nth-of-type(1) { 
 
    background: red; 
 
    -webkit-order: 3; 
 
    order: 3; 
 
} 
 
#blockContainer div:nth-of-type(2) { 
 
    background: green; 
 
    -webkit-order: 1; 
 
    order: 1; 
 
} 
 
#blockContainer div:nth-of-type(3) { 
 
    background: blue; 
 
    -webkit-order: 2; 
 
    order: 2; 
 
}

<div id="blockContainer"> 
 
    <div>Block A</div> 
 
    <div>Block B</div> 
 
    <div>Block C</div> 
 
</div>

Answer 2

CSS順序プロパティ順序プロパティは、同じ容器内フレキシブルアイテムの残りの部分に柔軟アイテムの相対的な順序を指定

。

注：要素が柔軟な項目でない場合、orderプロパティは無効です。

投稿者：w3schools.com