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

我已经研究过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 方法,但还有另一种方法可以使用简单的浮点数来实现它.
媒体查询允许在小于414px宽的视口上按所需顺序重新排列元素：

.wrap {
  background: #d0d0d0;
  padding: 1%;
}
.wrap:after {
  content: '';
  display: block;
  clear: both;
}
.el {
  float: left;
  margin: 1%;
}
.el1 {
  width: 31.33%;
  padding-bottom: 31.33%;
  background: #FF7676;
}
.el2 {
  float: right;
  width: 64.66%;
  padding-bottom: 14.66%;
  background: #C2FF76;
}
.el3 {
  width: 31.33%;
  padding-bottom: 14.66%;
  background: #FF9BF7;
}
.el4 {
  width: 31.33%;
  padding-bottom: 6.33%;
  background: #9BA4FF;
}
@media (max-width: 414px) {
  .el2,.el4 {
    width: 98%;
    padding-bottom: 31.33%;
  }
  .el1,.el3 {
    width: 48%;
    padding-bottom: 48%;
  }
}

<div class="wrap">
  <div class="el el2"></div>
  <div class="el el1"></div>
  <div class="el el3"></div>
  <div class="el el4"></div>
  <div class="el el4"></div>
</div>

请注意,我在此示例中使用了padding-bottom来保持元素的宽高比(this answer中的更多信息).
我不知道你打算在块中放入什么内容,但如果你想坚持使用“填充技术”,你需要使用绝对位置.对于纯文本内容,您可以查看this fiddle.

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

解决方法

猜你在找的Flex相关文章