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

Marco 发表于 Dev

马可

我研究了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甚至有可能吗？是否有更好的替代方案更适合这种布局？

布娃娃

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

事实是，grid仅在IE，Edge和即将到来的Safari浏览器中受支持，但是据称Firefox和Chrome的支持指日可待，您可以通过在这些浏览器中启用正确的开发人员标志来立即开始尝试。

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

*{
  box-sizing: border-box;
}

.flexbox{
  width: 320px;
  display: grid;
  grid-template-columns: calc(50% - 0.5ch) calc(50% - 0.5ch);
  grid-gap: 1ch;
}

.one{
  order: 2;
  background-color: red;
}

.two{
  grid-column: 1 / 3;
  order: 1;
  background-color: green;
}

.three{
  order: 3;
  background-color: pink;
}

.four{
  display: grid;
  grid-column: 1 / 3;
  grid-gap: 1ch;
  order: 4;
  background-color: lavender;
}

.inner-container{
  background-color: violet;
}

@media screen and (min-width: 500px){
  .flexbox{
    width: 500px;
    grid-template-columns: calc(33.333% - 0.333ch) calc(33.333% - 0.333ch) calc(33.333% - 0.333ch);
  }
  
  .one{
    grid-row: 1 / 3;
    order: 1;
  }
  
  .two{
    order: 2;
    grid-column: 2 / 4;
  }
  
  .three{
    order: 3;
  }
  
  .four{
    grid-column: 3 / 4;
    order: 4;
  }
}

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。