Flexbox包装没有特定的高度

Question

我有一个html结构，我希望以不同的方式显示更小和更大的屏幕，如下所示：

更大的屏幕

 -----------    ------------------------------      -----------
|           |  |           Section A          |    |           |
|           |   ------------------------------     |           |
| Section B |  |           Section D          |    | Section C |
|           |   ------------------------------     |           |
|           |  |           Section E          |    |           |
 -----------    ------------------------------      -----------

较小的屏幕

 ------------------------------ 
|           Section A          |
 ------------------------------ 
|           Section B          |
 ------------------------------  
|           Section C          | 
 ------------------------------  
|           Section D          | 
 ------------------------------  
|           Section E          | 
 ------------------------------  

我目前拥有什么

我设法得到了非常相似的东西：

#container {
  display: flex;
  flex-direction: column;
}
.section {
  background: gray;
  flex: 1; order: 1;
}
.pull {
  background: lightblue;
}

@media screen and (min-width: 1000px) {
  #container {
    flex-wrap: wrap;
  }
  
  .section {
    order: 2;
    width: 80%;
    flex: 1 0 25%;
  }
  
  .pull {
    width: 10%;
    flex: 0 0 100%;
  }
  .left {
    order:1;
  }
  .right {
    order:3;
  }
}

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

html,
body,
#container {
  height: 100%;
  width: 100%;
}

<div id="container">
  <div class="section">Section A</div>
  <div class="section pull left">Section B</div>
  <div class="section pull right">Section C</div>
  <div class="section">Section D</div>
  <div class="section">Section E</div>
</div>

问题是......

我需要让这个布局在 部分中高度。查看问题的演示：

.bigtext { height: 500px; background: red }
#container {
  display: flex;
  flex-direction: column;
}
.section {
  background: gray;
  flex: 1; order: 1;
}
.pull {
  background: lightblue;
}

@media screen and (min-width: 1000px) {
  #container {
    flex-wrap: wrap;
  }
  
  .section {
    order: 2;
    width: 80%;
    flex: 1 0 25%;
  }
  
  .pull {
    width: 10%;
    flex: 0 0 100%;
  }
  .left {
    order:1;
  }
  .right {
    order:3;
  }
}

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

html,
body,
#container {
  height: 100%;
  width: 100%;
}

<div id="container">
  <div class="section">Section A</div>
  <div class="section pull left">Section B</div>
  <div class="section pull right">Section C</div>
  <div class="section"><div class="bigtext">hi</div></div>
  <div class="section">Section E</div>
</div>

在较小的屏幕上，部分应始终堆叠在一起。

在较大的屏幕上，每个部分应该采用其后代的高度，而不会损害结构。对于应始终粘在侧面的侧柱（B和C部分）以及中间部分（A，D，E）应该始终按顺序出现在彼此之上。

我应该注意，如果部分的高度（总计）大于视口，则应该可以在页面上滚动，正如人们在常规网页中所期望的那样。

我没有设法做到这一点。我希望这里有人可以帮助我。

Answer 1

这里有棘手的问题。我也无法获得纯粹的CSS解决方案，因为无论如何你似乎都需要一些包装器来组合你想要的东西。

然而，通过添加一点JavaScript，我们可以实现我们想要的。希望这是你的选择。

在下面的代码片段中，我根据桌面布局将标记分为三列，然后使用JS删除较小屏幕上的包装器，以便可以使用order对内部部分进行重新排序属性。

更全面的示例将涉及在调整大小时包装和展开部分。下面没有这么多。

$(function() {
  if (window.matchMedia('(max-width: 999px)').matches) {
    $('.section').unwrap();
  }
})

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-wrap: wrap;
}
#col1, #col3 {
  flex-basis: 25%;
}
#col2 {
  flex-basis: 50%;
}
.section.B, .section.C {
  height: 100%;
}
p, h3 {
  margin-top: 0;
}
p:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 999px) {
  body {
    flex-direction: column;
  }
  .section.A {
    order: 1
  }
  .section.B {
    order: 2;
  }
  .section.C {
    order: 3;
  }
  .section.D {
    order: 4;
  }
  .section.E {
    order: 5;
  }
}
.section.A { background: red; }
.section.B { background: blue; }
.section.C { background: yellow; }
.section.D { background: green; }
.section.E { background: grey; }
.section.F { background: lightblue; }
.section.G { background: gold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="col1">
  <div class="section B">
    <h3>Section B</h3>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
</div>
<div id="col2">
  <div class="section A">
    <h3>Section A</h3>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
  <div class="section D">
    <h3>Section D</h3>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
  <div class="section E">
    <h3>Section E</h3>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
</div>
<div id="col3">
  <div class="section C">
    <h3>Section C</h3>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
    <p>lorem ipsum</p>
  </div>
</div>