フレックスボックスでレスポンスグリッドを作成

Question

私は解決しようとしている本当の複雑な状況に陥っています。
大きなディスプレイでは2列（最大）のレイアウトを、小さなディスプレイでは1列（450ピクセルより小さい）を作成しようとしています。

私はので、ここでいくつかの画像を説明するための簡単な方法がありません：

• 2列レイアウト（すべての行のセルが同じ高さでなければならないことに注意してください）

を

• 予想される1列レイアウト（'B'セルはすべて 'A'セルLS）

は、私は次のCSSでの2列表示を達成するために管理します。

.breeding-row { 
     /* equal height of the children */ 
      display: flex; 
    } 

    .breeding-col { 
     /* additionally, equal width */ 
     flex: 1; 
     padding: 0; 
     border: none; 
    } 

    @media only screen and (max-width: 450px) { 
      .breeding-col { 
        flex-basis: 100%; 
      } 
      .breeding-row { 
       flex-direction: column; 
      } 
    } 

    @media only screen and (min-width: 450px) { 
     .breeding-col { 
       flex-basis: 50%; 
      } 
    } 

これは2つの列に最適です。それは、細胞を1列になった場合でも、明らかに、次々に配置され、私は1列に私は考えるしようとしている

のための...

• 実際の結果を得ます1列目と2列目の両方で機能するものが表示され、1列目の結果が期待されます。 私は何かアドバイスをいただければ幸いです。

Answer 1

小さい画面では、orderプロパティを使用して順序を変更します。あなたが作る、あなたはこのように行うことができますメディアクエリー、との組み合わせで

でも子供（2及び4）order: 1（デフォルトは0です）画面が600PX下回ると、一緒columnにフレックス方向を変えてもらいます彼らはお互いの上に積み重なります。

align-itemsのデフォルト値はstretchであるため、アイテムの行あたりの高さは同じになります。

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex div { 
 
    flex-basis: calc(50% - 20px); 
 
    margin: 10px; 
 
    background: blue; 
 
} 
 

 
.flex div:nth-child(odd) { 
 
    background: red; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .flex { 
 
    flex-direction: column; 
 
    } 
 
    .flex div { 
 
    flex-basis: auto; 
 
    } 
 
    .flex div:nth-child(even) { 
 
    order: 1; 
 
    } 
 
}

<div class="flex"> 
 
    <div>R1<br>R1<br>R1<br>R1<br>R1<br></div> 
 
    <div>B1</div> 
 
    <div>R2</div> 
 
    <div>B2<br>B2<br>B2<br></div> 
 
</div>

---

はまた、行としてフレックス方向を維持し、変更することができますflex-basisから100%

.flex { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.flex div { 
 
    flex-basis: calc(50% - 20px); 
 
    margin: 10px; 
 
    background: blue; 
 
} 
 

 
.flex div:nth-child(odd) { 
 
    background: red; 
 
} 
 

 
@media (max-width: 600px) { 
 
    .flex div { 
 
    flex-basis: 100%; 
 
    } 
 
    .flex div:nth-child(even) { 
 
    order: 1; 
 
    } 
 
}

<div class="flex"> 
 
    <div>R1<br>R1<br>R1<br>R1<br>R1<br></div> 
 
    <div>B1</div> 
 
    <div>R2</div> 
 
    <div>B2<br>B2<br>B2<br></div> 
 
</div>