有没有办法创建一个没有空格的布局,其中大多数物品的尺寸是相同的,但有些是高度的2倍?我可以做类似的东西我想用下面的CSS:用flexbox增加物品的高度
家长:
display: flex;
flex-direction: column;
justify-content: flex-start;
align-content: flex-start;
flex-wrap: wrap;
孩子:
width: 22%
height: 100px;
高大的人有height: 200px
。它看起来像这样:
这是非常密切的,但问题是,我需要一个左到右的顺序,而不是顶部至底部,所以我不能使用flex-direction: column
。如果我做同样的flex-direction: row
,这是行不通的:
任何想法?
如果大多数项目是相同的维度,只有少数是高度的2倍,请保留您的'列'布局并使用'order'属性重新排列它们。如果在您的情况下这是可行的,请告诉我,我会准备一个更详细的答案。 –
Michael_B,请这么做,这听起来像是我最好的解决方案。 –
'order'对于指定数量的div(30+)会非常粗糙......加上它不会响应....您可能需要JS来跟踪...并且如果您正在使用JS,你不妨使用Masonry.js。 :) –