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对这种布局很有用：

但这仍然是实验性的，可以在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

以下是我在评论中描述的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>

响应式flexbox布局包装问题

3 个答案: