这是否可以使用flexbox

Question

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

漂浮很容易，但我不能用flex做。建议？

段：

＆＃13;

＆＃13;

*{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%}
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

看看这是否有帮助

＆＃13;

＆＃13;

* {
  margin: 0
}

.topBox,
.leftBox,
.rightBox {
  padding: 5px;
}

.topBox {
  background: green
}

.leftBox {
  background: red
}

.rightBox {
  background: yellow
}

.row {
  display: flex
}

.leftBox,
.rightBox {
  width: 50%;
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .wrapper {
    position: relative;
    padding-right: 30%;
    min-height: 100vh;
  }
  .rightBox {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    width: 30%;
  }
  .leftBox {
    width: 100%
  }
}

＆＃13;

<div class="wrapper">
  <div class="topBox">
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
    content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
    versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
  </div>
  <div class="row">
    <div class="leftBox">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
      content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
      versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
    <div class="rightBox">
      It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here,
      content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various
      versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

* {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>

Answer 3

我会使用原生的w3c css网格布局，现在大多数导航器都支持。 Css网格允许设置水平和垂直对齐。

＆＃34;与表格一样，网格布局使作者能够将元素对齐到列和行中。但是，使用CSS网格比使用表格更多可能或更容易布局。例如，网格容器的子元素可以自己定位，使它们实际重叠和分层，类似于CSS定位元素。 ＆＃34;

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout 你会在css网格上找到很多视频

Answer 4

Flexbox项目，如内联块，与网格项目和浮动不同，不能跨越多行项目。这就是为什么使用Flexbox实现所需布局的唯一方法是使用不同的弹性方向 - 宽屏幕列和窄屏幕行。反过来，列弯曲方向需要知道容器的高度，以便正确地在列之间分配项目。

＆＃13;

＆＃13;

*{box-sizing:border-box;}
#container {
display: flex;
width: 500px;
flex-wrap: wrap;
flex-direction: column;
height: 300px;
}
#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){
#container { flex-direction: row; max-width: 100%; height: auto; }
#green{width: 100%; }
#yellow{width: 50%; }
#red{width: 50%; height: auto; }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

是的，可以使用弹性框。你想要做的是：

布局1：

将布局划分为两个命名 - 左容器＆amp; 右容器，其中绿色框和红色框将位于左侧容器＆amp;将黄色框放在右侧容器中。 并申请display: flex to layout这样你就可以完美地实现它。

＆＃13;

＆＃13;

.container {
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.left-container {
  width: 60%;
  min-height: 400px;
}
.green-box, .red-box, .yellow-box {
  width: 100%;
  margin-bottom: 1%;
}
.green-box {
  background: green;
  height: 50%;
}
.red-box {
  background: red;
  height: 49%;
}
.right-container {
  width: 39%;
  min-height: 400px;
}
.yellow-box {
  background: yellow;
  height: 100%;
}

＆＃13;

<div class="container">
  <div class="left-container">
    <div class="green-box"></div>
    <div class="red-box"></div>
  </div>
  <div class="right-container">
    <div class="yellow-box"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;