Responsive flexbox layout wrap issue

问题

I have these two different layouts illustrated in the code below. My issue is that I can't replicate these layouts without changing the markup. I was wondering if there was some fancy flexbox way I can accomplish exactly this while only using one html scheme. Note: the container will need to have a dynamic height. The solution doesn't necessarily have to use flexbox as long as the desired layout is achieved.

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>

回答1:

Here's the float-flexbox method I described in the comments. Not particularly fond of it, but it does exactly what you asked for.

It's hacky and, from my POV, goes in the same category as Bootstrap 3's .clearfix::before|after hack — {display:table; content: " ";} — it is a practical solution to a real layout problem, usable until a better, cleaner one will have better browser support and render this one obsolete.

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>

回答2:

display:grid will be useful for this kind of layout:

but this is still experimental and can be tested in few browsers, see also http://caniuse.com/#search=grid

A tutorial among others 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

回答3:

Another solution, it's independent of flex box, and does not need fixed height. Flexbox does not do a good job of adjusting to two dimensional layouts!

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>

来源：https://stackoverflow.com/questions/41797496/responsive-flexbox-layout-wrap-issue