使用FlexBox創建響應式網格

我正在嘗試解決一個真實複雜的情況。
我嘗試在較大的顯示器上創建2列（最大）佈局，在小顯示器上創建1列（小於450px）。使用FlexBox創建響應式網格

我有沒有簡單的方法來解釋所以這裏的一些圖片：

2列布局（注意：每行單元格應該是在同一高度）

預期的1列布局（請注意，'B'單元應該在所有'A'單元之後LS）

我管理以實現2-列顯示用下面的CSS。

.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列的預期結果... 我會高度讚賞任何建議。

來源

2017-09-04 Yaron

做一個jsfiddl e – Shard

您可以使用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>

來源

2017-09-04 13:26:33 LGSon

但高度應該分別對應於...（不是固定高度...） – Yaron

@Yaron我更新了我的答案而不是內容。 – LGSon

我崇拜你@LGSon。真。我要爲你做一個神殿。 – Yaron

使用FlexBox創建響應式網格

回答

相關問題