Flexbox 响应式行列布局答案

【问题标题】：Flexbox responsive row column layoutFlexbox 响应式行列布局
【发布时间】：2018-03-19 13:33:53
【问题描述】：

我有以下

HTML

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

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

移动

平板电脑

桌面

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

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

【问题讨论】：

标签： html css flexbox

【解决方案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 你无法想象，我多么感谢你。

【解决方案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>

【讨论】：

【解决方案3】：

有一个名为 order 的 flexbox 属性在这里可能很有用，因为您希望中心 div 排在最后：https://css-tricks.com/almanac/properties/o/order

可能还有其他解决方案，但这是您应该知道的：) 提示：您可以使用媒体查询来根据需要更改顺序。

另见flex-flow: row wrap;

【讨论】：