响应式flexbox布局包装问题 [英] Responsive flexbox layout wrap issue

问题描述

下面的代码说明了这两种不同的布局。我的问题是，我不能在不改变标记的情况下复制这些布局。我想知道是否有一些奇特的Flexbox方式，我可以完成这一点，而只使用一个HTML方案。注意：容器将需要有一个动态的高度。只要达到所需的布局，解决方案不一定必须使用flexbox。

main {width：750px;最大宽度：100％;保证金：汽车;边框：实心1px黑色;显示：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;宽度：100％;}

< h2> / H2><主> < div class =a> a< / div> < div class =b> b< div class =c> c< / div> < / DIV>< /主>< H2>移动< / H2><主> < div class =a-mobile> a-mobile< / div> < div class =b-mobile> b-mobile< / div> < div class =c-mobile> c-mobile< / div>< / main>




解决方案 这里是浮动 - flexbox

这是 hacky ，从我的POV开始，它属于同一类别作为Bootstrap 3的 .clearfix :: before |之后| / code> hack — {显示：表;内容：;} —它是一个真正的布局问题的实际解决方案，直到一个更好，更清洁的将有更好的浏览器支持，并使其过时。



main {width：750px;最大宽度：100％;保证金：汽车;边框：实心1px黑色;显示：flex; flex-wrap：wrap; margin-bottom：1em;颜色：白色;} 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;溢出：隐藏; } .a {float：left;最小宽度：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< c> c< br /> c< br /> c< / div p>< / main> p>

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>

解决方案

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>

这篇关于响应式flexbox布局包装问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！