Flexbox 响应式行列布局

Question

我有以下

HTML

 <div>
   <div class="left"></div>
   <div class="center"></div>
   <div class="right"></div>
</div>

我想使用 flexbox 实现以下布局。

移动的

药片

桌面

我对移动和桌面布局没有问题，但无法解决平板电脑的问题。

如何强制 .center div 出现在 .letf 和 .right 之后？有没有办法用 flexbox 实现它？

原文由 koryakinp 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

此代码将在平板电脑中实现您想要的，您可以将其包装在平板电脑尺寸的媒体查询中。

关键是设置左右宽度为50%，中心为100%，然后声明“flex-flow: row wrap;”在容器上。

 #container{
  display:flex;
  flex-flow: row wrap;
}
.left{
  order: 1;
  width:50%;
  background-color: red;
}
.right{
  order: 2;
  width:50%;
  background-color: green;
}
.center{
  order: 3;
  width:100%;
  background-color: blue;
}

<div id="container">
   <div class="left">left</div>
   <div class="center">center</div>
   <div class="right">right</div>
</div>

这是一支带演示的笔 https://codepen.io/Washable/pen/ZXxYPJ

原文由 TidyDev 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 order 和

@media(min-width:768px) {
  .flexbox {
    flex-flow: row nowrap;
  }
  ...
}

总共

 .flexbox {
  display: flex;
  flex-direction: column;
  background: #565656;
  padding: 5px;
  align-content: space-between;
  justify-content: space-between;
}

.flexbox>div {
  text-align: center;
  padding: 20px 0;
  margin: 5px;
}

.flexbox>.left {
  background-color: #D30058;
}

.flexbox>.center {
  background-color: #36ABE1;
}

.flexbox>.right {
  background-color: #23B776;
}

@media(min-width:576px) {
  .flexbox {
    flex-flow: row wrap;
  }
  .flexbox>.left {
    order: 1;
    flex: 0.5;
  }
  .flexbox>.right {
    order: 2;
    flex: 0.5;
  }
  .flexbox>.center {
    order: 3;
    width: 100%;
  }
}

@media(min-width:768px) {
  .flexbox {
    flex-flow: row nowrap;
  }
  .flexbox>div {
    width: 33.33% !important;
  }
  .flexbox>.left {
    order: 1;
  }
  .flexbox>.center {
    order: 2;
  }
  .flexbox>.right {
    order: 3;
  }
}

 <div class="flexbox">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>

原文由 user3589620 发布，翻译遵循 CC BY-SA 3.0 许可协议