我在我的网站上使用了一个flexbox来显示帖子预览。每个帖子预览都是固定大小(384*384px),显示为一个网格,每行可以容纳尽可能多的水平平铺,并且随着页面大小的调整,它会动态地重新排列自己。这是当前的CSS:
.post-list { display: flex; flex-wrap: wrap; }
.post-tile { flex: 0 0 384px; width: 384px; height: 384px; margin: 10px; padding: 30px; box-sizing: border-box; overflow: hidden; border-radius: 32px; }
如果可能的话,我希望它能做一件额外的事情:如果窗口比其中一个磁贴的宽度窄,我希望它能将磁贴的大小调整到适合屏幕的大小,同时保持高度和宽度不变,但我不知道如何实现这一点。
Here is a JS Fiddle,其中使用一些基本的图块填充此CSS。
2条答案
按热度按时间wnavrhmk1#
您可能正在寻找
flex-shrink: 1;
,它可以让您的项目缩小。注意:您可能还想处理
.post-list
元素的填充参见以下示例
第一个
pftdvrlh2#
目前是这样的
更改为
第二个值是flex-shrink,它可以解决这个问题。