1 个项目的 Flex 框是其他项目的两倍，但仍像网格系统一样保持所有内容内联

Question

我有一个flexbox布局，所有项目的大小都相同，除了一个是其他项目宽度的两倍，但高度相同。

我目前遇到的问题是 flexbox 项目的顶行没有与 flexbox 中的其余行对齐，这些行都包含相同宽度的项目。

我在这里做了一个 jsfiddle 的问题： http : //jsfiddle.net/4e8c0w9z/

知道这是否可以实现吗？ 我正在研究网格系统，但它们似乎都围绕每个网格固定数量的列工作，并带有断点。 而不是允许每行任意数量的项目的 flexbox。

Answer 1

我觉得你在这里有一点数学问题。 您的.box2并不完全是.box两倍。 即使您使用box-sizing: border-box; 如果您希望间隙正确排列，则必须记住项目的margin 。 这是当您将.box2的宽度设置为 180px (150 + 15 + 15) 时发生的情况的演示

 body { box-sizing: border-box; height:100%; background: #336633; } .wrapper { display:flex; flex-direction:row; flex-wrap: wrap; } .box { width: 75px; height: 100px; background: white; margin: 15px; } .box2 { width: 180px; height: 100px; background: white; margin: 15px; }

 <div class="wrapper"> <div class="box2"></div> <!--THIS IS THE 2 width box--> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <!--wrapper-->

这是@JoshBurgess 的一些补充，使其更加flex 。 有了这个，您不必设置特定的宽度，而是使用flex-basis property 。

 body { box-sizing: border-box; height:100%; background: #336633; } .wrapper { display:flex; flex-direction:row; flex-wrap: wrap; } .box { flex: 0 1 75px; height: 100px; background: white; margin: 15px; } .box2 { flex: 0 1 180px; height: 100px; background: white; margin: 15px; }

 <div class="wrapper"> <div class="box2"></div> <!--THIS IS THE 2 width box--> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <!--wrapper-->

Answer 2

我看到弹性框宽度的第一项是双倍。 但是如果宽度和高度都是其他的两倍呢？ 如何解决？