窗口过窄时如何让Flex布局的帖子预览Tile等比缩小适配？

问题描述 #

我在网站中使用flexbox将帖子预览以Tile形式展示，每个Tile固定尺寸为384×384px，布局会根据页面宽度自动换行，动态调整每行Tile数量。现有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; }

我希望实现额外效果：当窗口宽度小于单个Tile宽度时，让Tile缩小以适配屏幕，同时保持宽高一致，但不知如何实现。

解决方案 #

要实现屏幕宽度不足单个Tile宽度时自动缩小并保持1:1宽高比，只需调整两个关键CSS属性：

1. 修改Tile的flex属性，让它在空间充足时保持384px宽度，空间不足时自动收缩以适配屏幕（需扣除左右margin的宽度，避免贴边）；
2. 用aspect-ratio: 1/1替代固定的height，确保宽高始终保持一致。

修改后的完整CSS代码 #

.post-list {
  display: flex;
  flex-wrap: wrap;
  padding: 10px; /* 给容器加内边距，避免Tile贴紧窗口边缘 */
}

.post-tile {
  flex: 0 1 min(384px, calc(100% - 20px));
  aspect-ratio: 1/1;
  margin: 10px;
  padding: 30px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 32px;
}

代码说明 #

• flex: 0 1 min(384px, calc(100% - 20px))：
  • 0：禁止Tile在空间充足时拉伸，保持固定384px宽度；
  • 1：允许Tile在空间不足时收缩；
  • min(384px, calc(100% - 20px))：优先取384px作为基础宽度，当屏幕宽度小于384px + 左右margin总和(20px)时，自动切换为占满屏幕宽度（扣除margin）。
• aspect-ratio: 1/1：强制Tile始终保持正方形，无需固定height，宽度变化时高度会自动同步调整。

简化间距管理的替代方案 #

如果想简化间距管理，可以把Tile的margin替换为容器的gap，代码更简洁：

.post-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px; /* 替代Tile的margin，统一管理间距 */
  padding: 10px;
}

.post-tile {
  flex: 0 1 min(384px, 100%);
  aspect-ratio: 1/1;
  padding: 30px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 32px;
}

内容的提问来源于stack exchange，提问作者regret