![div]( "div")
本文介绍了Flexbox布局图案1/3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在寻找一些在flexbox中准备布局模式的帮助，事情是，我将有一组div打印在容器内，我不能改变渲染逻辑（即添加一些包装行），但是，我我喜欢得到这样的东西：
很不幸每次都卡住了，结果一点也不令人满意：/
这些div的高度是固定的，1是2 + 3 +的差距。
[]
提前致谢
解决方案
/ 39645224/3597276>链接由@Michael_B提供
您可以生成数据 - 控制台 - 数据 - 控制台数据 - 控制台数据 - 控制台数据 - 控制台数据 - 控制台=truedata-babel =false>
.boxed {width ：100％;背景：#FFF; overflow：hidden;}。boxed div {height：50px;保证金：4PX;背景：＃f5f5f5;宽度：calc（40％ - 16px）; float：left;} boxed div：nth-child（6n + 1），.boxed div：nth-child（6n + 4）{background：salmon;高度：108px; width：60％;} .boxed div：nth-child（6n + 4），div：nth-child（6n + 5），div：nth-child（6n + 6）{float：right; } < div class =boxed> < DIV→1< / DIV> < DIV> 2'; / DIV> < DIV> 3'; / DIV> < DIV> 4℃; / DIV> < DIV> 5℃; / DIV> < DIV→6< / DIV> < DIV→1< / DIV> < DIV> 2'; / DIV> < DIV> 3'; / DIV> < DIV> 4℃; / DIV> < DIV> 5℃; / DIV> < div> 6< / div>< / div>
>请注意，右对齐的大块更改为6n + 4而不是6n + 6
I'm looking for some help with preparing layout pattern in flexbox, the thing is that I will have a set of divs printed inside container and I can not change the rendering logic (i.e. add some wrapping rows), yet, I'd like to get something like this:
Unfortunately got stuck every time, results weren't satisfactory at all :/Height of those divs is fixed, 1 is a sum of 2 + 3 + gap.
https://jsfiddle.net/zechkgf4/
[]
Thank you in advance
解决方案
What you want to do is not posible with flex-box as is pointed in link provided by @Michael_B
You can generate something really close to what you want using floats:
.boxed {
width:100%;
background:#fff;
overflow:hidden;
}
.boxed div {
height:50px;
margin:4px;
background:#f5f5f5;
width:calc(40% - 16px);
float: left;
}
.boxed div:nth-child(6n + 1), .boxed div:nth-child(6n + 4) {
background:salmon;
height:108px;
width:60%;
}
.boxed div:nth-child(6n + 4), div:nth-child(6n + 5), div:nth-child(6n + 6) {
float: right;
}<div class="boxed">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Note that the big block aligned to right is changed to be 6n+4 instead of 6n+6
这篇关于Flexbox布局图案1/3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！