响应式 flexbox 布局换行问题

Question

下面的代码说明了这两种不同的布局。我的问题是我无法在不更改标记的情况下复制这些布局。我想知道是否有一些奇特的 flexbox 方式我可以在只使用一个 html 方案的情况下完成这一点。注意：容器需要具有动态高度。只要实现了所需的布局，解决方案就不必使用 flexbox。

main {
  width: 750px;
  max-width: 100%;
  margin: auto;
  border: solid 1px black;
  display: flex;
  flex-wrap: wrap;
}



.a {
  background: red;
  width: 40%;
}
.b {
  background: blue;
  width: 60%;
}
.c {
  background: green;
}


.a-mobile {
  background: red;
  width: 40%;
}
.b-mobile {
  background: blue;
  width: 60%;
}
.c-mobile {
  background: green;
  width: 100%;
}

<h2>Desktop</h2>
<main>
  <div class="a">a</div>
  <div class="b">b
   <div class="c">c</div>
  </div>
</main>

<h2>Mobile</h2>
<main>
  <div class="a-mobile">a-mobile</div>
  <div class="b-mobile">b-mobile</div>
  <div class="c-mobile">c-mobile</div>
</main>

Answer 1

display:grid 对于这种布局很有用：

但是这个仍然是实验性的并且（2020）可以在few browsers进行测试，另见http://caniuse.com/#search=grid

教程等https://css-tricks.com/snippets/css/complete-guide-grid/

main {
  display: grid;
  grid-template-columns: 30% auto;
}
.a {
  background: red;
  grid-row-end: span 2
}
.b,
.c {
  background: green;
}
.c {
  background: lightblue
}
@media screen and (max-width: 700px) {/* value setted for the demo */
  .a {
    grid-row-end: span 1/* reset optionnal in this very case */
  }
  .c {
    grid-column-end: span 2
  }
}

<main>
  <div class="a"> break point set at 700px for demo</div>
  <div class="b"> i don't move much myself :)</div>
  <div class="c"> see in full page to see me aside the red box and below the green one</div>
</main>

codepen to play with

Answer 2

这是我在 cmets 中描述的float-flexbox 方法。不是特别喜欢它，但它完全符合您的要求。

它是 hacky 并且从我的 POV 来看，它与 Bootstrap 3 的 .clearfix::before|after hack - {display:table; content: " ";} 属于同一类别 - 这是一个实际的解决方案布局问题，直到一个更好、更干净的有更好的浏览器支持并使其过时为止。

main {
  width: 750px;
  max-width: 100%;
  margin: auto;
  border: solid 1px black;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  color: white;
}
.a {
  background: red;
  flex-basis: 40%;
}
.b {
  background: blue;
  flex-basis: 60%;
}
.c {
  background: green;
  flex-basis: 100%;
}

@media (min-width: 800px) {
  main {
    display: block;
    overflow: hidden;
  }
  .a {
    float: left;
    min-width: 40%;
  }
  .b,.c {
    padding-left: 40%;
  }
  .a,.c {
    padding-bottom: 32768px;
    margin-bottom: -32768px;
    }
}

<main>
<div class="a">a<br />a<br />a<br/>a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</main>
<main>
<div class="a">a</div>
  <div class="b">b<br />b<br />b<br/>b</div>
  <div class="c">c</div>
</main>
<main>
<div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c<br />c<br />c<br/>c</div>
</main>

Answer 3

另一种解决方案，它独立于弹性盒子，不需要固定高度。 Flexbox 在适应二维布局方面做得不好！

html {
  height: 100%;
}

body {
  height: 100%;
}

main {
  width: 750px;
  max-width: 100%;
  margin: auto;
  border: solid 1px black;
  height: 100%;
}

.a {
  background: red;
  width: 40%;
  height: 100%;
  float: left;
}

.b {
  background: blue;
  width: 60%;
  height: 50%;
  float: left;
}

.c {
  background: green;
  width: 60%;
  height: 50%;
  float: left;
}

@media (max-width: 800px) {
   .a {
    width: 40%;
     height: 50%;
  }

  .c {
    width: 100%;
  } 
}

<h2>Desktop and Mobile</h2>
<main>
  <div class="a">a</div>
  <div class="b">b</div>
   <div class="c">c</div>
</main>