响应式flexbox布局包装问题 [英] Responsive flexbox layout wrap issue
问题描述
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 $ c $我在评论中描述的方法。不是特别喜欢它,但它确实是你要求的。
这是 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屋!