Question

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

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

2列布局（请注意每个行单元格应该在同一高度）

预期的1栏布局（请注意＆＃39; B＆＃39;单元格应该在所有＆＃39; A＆＃39;单元格之后）

我设法使用以下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属性在较小的屏幕上更改订单。

结合媒体查询，你可以这样做，当你的屏幕低于600px时，你可以让偶数孩子（2和4）获得order: 1（默认为0）将弯曲方向改为column，它们将叠加在一起。

由于align-items的默认值为stretch，因此每行的项目高度相同。

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

您还可以将折线方向保持为行，并将flex-basis更改为100%

＆＃13;

.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;
  }
}

＆＃13;

<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>

＆＃13;

使用FlexBox创建响应式网格

1 个答案: