css - 这可能与 flexbox

Question

我已经尝试了我在 css 中所知道的一切来让这个布局工作，但我没有成功。甚至可以使用 flexbox 制作这些布局（不同的分辨率）。

浮动很容易，但我不能用 flex 做到这一点。建议？

片段：

*{box-sizing:border-box;}
#container {
display: flex;
width: 500px;
flex-wrap: wrap;
}
#green{background: green; width: 70%; height: 100px}
#yellow{background: yellow; width: 30%; height: 200px;}
#red{background: red; width: 70%; height: 70px;}

@media screen and (max-width: 600px){
#green{width: 100%;}
#yellow{width: 50%; order: 3}
#red{width: 50%}
}

<div id="container">
  <div id="green"></div>
  <div id="yellow"></div>

  <div id="red">^^^^ this space is the issue</div>
</div>

标签： cssflexbox

Answer 1

你可以做这样的事情并从这里继续，第二个布局需要一些定位帮助：

* {margin: 0; padding: 0; box-sizing: border-box}

#container {
  display: flex;
  flex-flow: column wrap;
  position: relative;
  width: 500px;
  height: 500px;
  padding: 5px;
  border: 2px solid;
}

#container > div {
  margin: 5px;
  border: 2px solid;
}

#green {background: green; flex: 0 1 calc(50% - 10px); position: relative}
#red {background: red; flex: 0 1 calc(50% - 10px)}
#yellow {background: yellow; flex: 1}

@media (max-width: 600px) {
  #green {flex: 1}
  #red {width: calc(50% - 15px); height: calc(50% - 5px); position: absolute; left: calc(50%); bottom: 5px}
  #yellow {flex: initial; width: calc(50% - 10px); height: 50%}
}

<div id="container">
  <div id="green">Green</div>
  <div id="red">Red ^^^^ this space is the issue</div>
  <div id="yellow">Yellow</div>
</div>