我已经研究过FlexBox以实现响应式布局,如下图所示.不幸的是,我仍然没有想出如何实现如图1所示的桌面布局,在小于414像素的视口上将其自身重新排列为图2.
图1(桌面视口)
图2(移动视口)
(缩放版)
点击此处查看image in original size
我的代码到目前为止：
.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宽的视口上按所需顺序重新排列元素：
媒体查询允许在小于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.