我想知道怎样才能得到和照片上一样的效果。我试过很多方法。。。失败了。
我正在尝试设置一个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>

09-10 05:05
查看更多