Flexbox可以将项目均匀分配到多行吗？ [英] Can flexbox divide items evenly on multiple rows?

问题描述

http://jsbin.com/qurumisu/1 （重新调整窗口以了解其工作原理）

它适合多少flex项目，因为它可以每行和拉伸它们的宽度平等填充整行。但是，这不帮助孤儿项目。如果第一行适合5/6项目，那么第二行只有一个，使得它比它的兄弟姐妹伸展得更宽。

这是否可能？

解决方案

不，没有媒体查询调整flex-basis值。

您可能需要考虑使用多列模块，这将尝试使用多列模块在所有创建的列中均匀分配元素：

  .foo {
 columns：100px; 
} 
  

http://caniuse.com/#feat=multicolumn

I've played around with responsive flexbox grids, with no media queries.

http://jsbin.com/qurumisu/1 (rescale the window to see how it works)

It fits as many flex items as it can per row and stretches their width equally to fill the whole line. However, this doesn't help "orphan" items. If the first line fits 5/6 items there is only one left for the second line, making it stretch much wider than it's siblings. I would prefer to avoid this behavior by having the elements divided evenly on the amount of rows required.

Is this possible?

解决方案

No, not without media queries adjusting the flex-basis value. Flex items that stretch and wrap attempt to maximize the amount of items that fit on each row.

You may want to consider using the multi-column module instead, which will attempt to equally distribute elements across all of the columns created:

.foo {
    columns: 100px;
}

http://caniuse.com/#feat=multicolumn

这篇关于Flexbox可以将项目均匀分配到多行吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！