我想知道怎样才能得到和照片上一样的效果。我试过很多方法。。。失败了。
我正在尝试设置一个flexbox,其中有四列,左列的大小相同。中间的列将填充剩余的空间。
我想要的效果,
代码如下:
.container {
display: flex;
}
.sidebar {
display: flex;
flex-direction: column;
}
.box-a {
background: yellow;
height: 200px;
width: 200px;
margin: 10px;
}
.box-b {
background: yellow;
height: 200px;
width: 200px;
margin: 10px;
}
.box-c {
background: yellow;
height: 200px;
width: 200px;
margin: 10px;
}
.box-d {
background: green;
height: 800px;
width: 600px;
margin: 10px;
}
<div class="container">
<div class="sidebar">
<div class="box-a"></div>
<div class="box-b"></div>
<div class="box-c"></div>
</div>
<div class="box-d"></div>
</div>
最佳答案
您可以使用order属性:
请尝试下面的代码和媒体查询。您可以看到浏览器调整大小的输出。
.container {
display: flex;
}
.sidebar {
display: flex;
flex-direction: column;
text-align: center;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
}
.box-a {
background: yellow;
height: 200px;
width: 200px;
margin: 10px;
}
.box-b {
background: yellow;
height: 200px;
width: 200px;
margin: 10px;
}
.box-c {
background: yellow;
height: 200px;
width: 200px;
margin: 10px;
}
.box-a, .box-b, .box-c {
padding: 20px 0;
}
.box-d {
background: green;
height: 800px;
width: 600px;
margin: 10px;
text-align: center;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 20px 0;
}
@media only screen and (max-width: 900px) {
.container {
display: flex;
float: left;
width: 100%;
flex-direction: column;
}
.sidebar {
order: 2;
display: inline-block;
flex-direction: column;
float: left;
width: 100%;
}
.box-a {
float: left;
width: 95%;
}
.box-b, .box-c {
float: left;
width: 46%;
}
.box-d {
order: 1;
float: left;
width: 95%;
}
}
@media only screen and (max-width: 700px) {
.box-b, .box-c {
float: left;
width: 95%;
}
}
<div class="container">
<div class="sidebar">
<div class="box-a">box1</div>
<div class="box-b">box2</div>
<div class="box-c">box3</div>
</div>
<div class="box-d">box4</div>
</div>