如何使用flexbox实现复杂的响应式HTML布局？

Question

我已经研究过Flexbox以实现响应式布局,如下图所示.不幸的是,我仍然没有想出如何实现如图1所示的桌面布局,在小于414像素的视口上将其自身重新排列为图2.

图1(桌面视口)

图2(移动视口)

(缩放版)

点击此处查看原始尺寸的图片

我的代码到目前为止:

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  flex-direction: row;
}
.content-flexbox.one {
  flex-basis: calc(66% - 1rem);
  order: 2;
}
.content-flexbox.two {
  flex-basis: calc(30% - 1rem);
  order: 1;
}
.content-flexbox.three {
  order: 3;
}
.content-flexbox.four {
  order: 4;
}
.content-flexbox {
  margin: 1rem;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@media only screen and (max-width: 959px) {
  .flexbox {
    -flex-direction: column;
    padding-top: 1rem;
  }
  .content-flexbox {
    margin: 1rem;
    flex: 1;
    flex-basis: 100%;
  }
  .content-flexbox.one {
    flex-basis: 100%;
    order: 1;
  }
  .content-flexbox.two {
    flex-basis: 100%;
    order: 2;
  }
}

<div class="flexbox">
  <div class="content-flexbox one">
    <h1 class="posttitle">Lorem ipsum</h1>
    <h2 class="subtitle">dolor sit amet</h2>
  </div>
  <div class="content-flexbox two">
    <img src="http://placehold.it/300x300" />
  </div>
  <div class="content-flexbox three">
    <span>Lorem ipsum dolor</span>
  </div>
  <div id="container-voting" class="content-flexbox four">
    <div class="inner-container set">
      <span>Lorem ipsum dolor</span>
    </div>
    <div class="inner-container get">
      <span>Lorem ipsum dolor</span>
    </div>
  </div>
</div>

我的问题

这对Flexbox来说甚至可能吗？有更好的选择更适合这种布局吗？

Answer 1

您\xe2\x80\x99正在寻找实验性网格语法。Flexbox 适用于较小的小部件或组件布局系统。网格用于整体页面布局，它\xe2\x80\x99非常棒。

\n\n

事实是，目前只有 IE、Edge 和即将推出的 Safari 浏览器支持网格，但据称 Firefox 和 Chrome 支持即将到来，您今天就可以通过在这些浏览器中启用正确的开发人员标志来开始尝试。

\n\n

这是一些示例代码，但同样，只有当您的浏览器支持新的网格语法时它才有效。

\n\n

\r\n

\r\n

*{\r\n  box-sizing: border-box;\r\n}\r\n\r\n.flexbox{\r\n  width: 320px;\r\n  display: grid;\r\n  grid-template-columns: calc(50% - 0.5ch) calc(50% - 0.5ch);\r\n  grid-gap: 1ch;\r\n}\r\n\r\n.one{\r\n  order: 2;\r\n  background-color: red;\r\n}\r\n\r\n.two{\r\n  grid-column: 1 / 3;\r\n  order: 1;\r\n  background-color: green;\r\n}\r\n\r\n.three{\r\n  order: 3;\r\n  background-color: pink;\r\n}\r\n\r\n.four{\r\n  display: grid;\r\n  grid-column: 1 / 3;\r\n  grid-gap: 1ch;\r\n  order: 4;\r\n  background-color: lavender;\r\n}\r\n\r\n.inner-container{\r\n  background-color: violet;\r\n}\r\n\r\n@media screen and (min-width: 500px){\r\n  .flexbox{\r\n    width: 500px;\r\n    grid-template-columns: calc(33.333% - 0.333ch) calc(33.333% - 0.333ch) calc(33.333% - 0.333ch);\r\n  }\r\n  \r\n  .one{\r\n    grid-row: 1 / 3;\r\n    order: 1;\r\n  }\r\n  \r\n  .two{\r\n    order: 2;\r\n    grid-column: 2 / 4;\r\n  }\r\n  \r\n  .three{\r\n    order: 3;\r\n  }\r\n  \r\n  .four{\r\n    grid-column: 3 / 4;\r\n    order: 4;\r\n  }\r\n}

\r\n

<div class="flexbox">\r\n<div class="content-flexbox one">\r\n    <h1 class="posttitle">Lorem ipsum</h1>\r\n    <h2 class="subtitle">dolor sit amet</h2>\r\n</div>\r\n<div class="content-flexbox two">\r\n    <img src="http://placehold.it/300x300" />\r\n</div>\r\n<div class="content-flexbox three">\r\n    <span>Lorem ipsum dolor</span>\r\n</div>\r\n<div id="container-voting" class="content-flexbox four">\r\n    <div class="inner-container set">\r\n        <span>Lorem ipsum dolor</span>\r\n    </div>\r\n    <div class="inner-container get">\r\n        <span>Lorem ipsum dolor</span>\r\n    </div>\r\n</div>

\r\n

\r\n

\r\n

\n