Flexbox响应行列布局

Question

我有以下

HTML

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

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

移动

平板

桌面

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

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

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

的笔

Answer 2

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

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

另见flex-flow: row wrap;

Answer 3

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