使用FlexBox创建响应式网格

Question

我正在尝试解决一个真实复杂的情况。
我尝试在较大的显示器上创建2列（最大）布局，在小显示器上创建1列（小于450px）。

我有没有简单的方法来解释所以这里的一些图片：

• 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列的预期结果... 我会高度赞赏任何建议。

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>