flexbox 可以在多行上均匀划分项目吗? [英] Can flexbox divide items evenly on multiple rows?

问题描述

我玩过响应式 flexbox 网格，没有媒体查询.

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

http://jsbin.com/qurumisu/1(重新缩放窗口以查看其工作原理)

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

它适合每行尽可能多的 flex 项目，并均匀地拉伸它们的宽度以填充整行.但是，这对孤立"项目没有帮助.如果第一行适合 5/6 个项目，那么第二行就只剩下一个了，这使得它比它的兄弟姐妹伸展得更宽.我更愿意通过将元素按所需的行数平均划分来避免这种行为.

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.

这可能吗?

推荐答案

不，不是没有媒体查询调整 flex-basis 值.可拉伸和包裹的 Flex 项目会尽量增加适合每一行的项目数量.

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屋！