为不同视图放置具有flex订单的容器

Question

我想使用flex构建以下结构作为桌面第一次构建：

​

在桌面视图中，我需要将Container1和Container2并排放置在相同的高度(使用最高度的内容的高度)，容器2包含两个内容框。

但是在移动设备中，总体顺序应该是不同的，就像在图像中所看到的那样。我在这里遇到的问题是Container2im在这里使用，因此很难根据移动视图的需要对内容进行回放。

以下是我的一些代码：

  <div class="content-wrapper">
    <div class="container-1" >
      Content 1
    </div>
    <div class="container-2">
       <div class="content-2">
         Content 2
        </div>
        <div class="content-3">
         Content 3
        </div>
    </div>
  </div>

.content-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;

 @media only screen and (max-width: 900px) {
    flex-direction: row;
  }
  .container-1 {
    width: 50%;
    display: flex;
    flex-direction: column;
    order: 2;
    justify-content: center;

    @media only screen and (max-width: 900px) {

      order: 1;
     }
   }
   .container-2{
    // height: 100vh;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    order: 1;
    width: 50%;

     @media only screen and (max-width: 900px) {

      order: 2
     }

     .content-2 {
       height: 70%;
      }

     .content-3 {
       height: 30%;
      }

   }
 } 

也许有人可以在这里帮助我如何用flex构建这个不同的视图(如果你能提供一个很好的网格解决方案，我也很高兴)

Answer 1

IMHO最简单的方法是使用CSS-Grid，它同时控制水平和垂直轴。为此，您不需要包装器，只需使用grid-template-areas

​

.grid {
  display: grid;
  grid-template-areas:
    "one two"
    "one two"
    "one three";
}

@media only screen
  and (max-width: 900px) {
    .grid {
      grid-template-areas:
        "two"
        "one"
        "three";
      }
}

.grid :nth-child(1) {
  grid-area: one;
}

.grid :nth-child(2) {
  grid-area: two;
}

.grid :nth-child(3) {
  grid-area: three;
}



/* for demonstration purpose only */
body {
  margin: 0;
}

.grid {
  grid-gap: 2px;
  height: 100vh;
  padding: 2px;
  box-sizing: border-box;
}

.grid > div {
  box-shadow: 0 0 0 2px black;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2em;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

​

Answer 2

我尝试使用flex和桌面视图，并使用移动视图显示flex：

.content-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: 70% 30%;
     height: 100%;
     width: 100%;
}
.content-wrapper * {
  border: solid 1px;
}
 .content-wrapper .content-1 {
   grid-row: 1/3;
   grid-column: 1/2;
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .content-wrapper .content-2 {
   display: flex;
     flex-direction: column;
     flex-wrap: nowrap;
}
.content-wrapper .content-2 {
   grid-column: 2/3;
   grid-row: 1/2;
}
 .content-wrapper .content-3 {
   grid-column: 2/3;
   grid-row: 2/3;
}
@media only screen and (max-width: 900px)
{
  .content-wrapper {
    display: flex;
    flex-direction: column;
  }
  .content-2 {
    order: -1;
  }
}
 
   </style>
  <div class="content-wrapper">
      <div class="content-1" >
        Content 1
      </div>
      <div class="content-2">
        Content 2
      </div>
      <div class="content-3">
        Content 3
      </div>
    </div>
</style>

我也改变了你的html。

Answer 3

你可以这样做：

.container-1 {
        width: 50%;
        display: flex;
        flex-direction: column;
        order: 2;
        justify-content: center;
    }

    @media only screen and (max-width: 900px) {
        .container-1 {
            order: 2;
        }
    }

    .container-2 {
        height: 100vh;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        order: 1;
        width: 50%;
    }

    @media only screen and (max-width: 900px) {
        .container-2 {
            order: 1
        }
    }