フレックスボックス4アイテムレイアウト

Question

現在のレイアウトでフレックスを動作させるのに問題があります。私は離れて1と3の間の垂直スペースを取得しようとしています。この2つを1つのコンテナにラップすることでこれを解決できるとわかりましたが、メディアのクエリに基づいてボックス1と3の間でボックス2を移動するためにflexのorderプロパティを使用する予定であるため、私はボックス1でを使用しようとしましたが、これは問題を解決していないようです。何か案は？

.flex-con { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    height: 300px; 
 
} 
 
.box { 
 
    width: 40%; 
 
    margin: 0 10px; 
 
    font-size: 20px; 
 
    text-align: center; 
 
} 
 

 
.one { 
 
    height: 40%; 
 
    border: 2px solid red; 
 
} 
 

 
.two { 
 
    height: 60%; 
 
    border: 2px solid blue; 
 
} 
 
.three { 
 
    height: 50%; 
 
    border: 2px solid green; 
 
} 
 
.four { 
 
    height: 50%; 
 
    border: 2px solid yellow; 
 
}

<div class="flex-con"> 
 
    <div class="box one">1</div> 
 
    <div class="box two">2</div> 
 
    <div class="box three">3</div> 
 
    <div class="box four">4</div> 
 
</div>

Answer 1

あなたの項目の現在の順序をあきらめて喜んでいる場合は、flex-direction: column;as seen hereを使用することができます。 それ以外の場合は、JavaScriptを使用して記述された正確なレイアウトを実現できます。

Answer 2

は、多分それは正しい答えではないのですが、あなたは合計親の高さよりも、両方の行の子供のflex-direction: column;

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.flex-con { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
    height: 300px; 
 
} 
 

 
.box { 
 
    font-size: 20px; 
 
    text-align: center; 
 
} 
 

 
.one { 
 
    flex: 0 0 40%; 
 
    border: 2px solid red; 
 
} 
 

 
.two { 
 
    flex: 0 0 60%; 
 
    border: 2px solid blue; 
 
} 
 
.three { 
 
    flex: 0 0 50%; 
 
    border: 2px solid green; 
 
} 
 
.four { 
 
    flex: 0 0 50%; 
 
    border: 2px solid yellow; 
 
}

<div class="flex-con"> 
 
    <div class="box one">1</div> 
 
    <div class="box two">2</div> 
 
    <div class="box three">3</div> 
 
    <div class="box four">4</div> 
 
</div>