如何防止窗口调整大小时所有flex-items自动调整尺寸？

嘿，我懂你碰到的麻烦——Flex布局默认会让子项跟着容器空间自动调整尺寸，哪怕你设了宽高，窗口缩小的时候还是会被挤变形。要让每个子项稳稳保持100x100px的正方形，核心是禁用子项的收缩行为，再明确固定宽高就行。

具体实现方案 #

1. 给flex子项设置固定的width: 100px和height: 100px
2. 加上flex-shrink: 0——这个属性控制子项在容器空间不足时是否收缩，设为0就完全禁止收缩了
3. 别忘了给flex容器加flex-wrap: wrap，不然空间不够时子项会直接溢出容器，而不是换行

完整代码示例 #

.flex-container {
  display: flex;
  flex-wrap: wrap; /* 空间不足时子项自动换行 */
  gap: 12px; /* 可选，给子项之间加间距，看起来更舒服 */
  padding: 12px;
}

.flex-item {
  width: 100px;
  height: 100px;
  flex-shrink: 0; /* 关键：禁止子项被压缩 */
  background-color: #f0f0f0; /* 可选，方便直观看到子项尺寸 */
  border: 1px solid #ddd;
}

如果你想更简洁，也可以用flex属性直接整合设置，效果完全一样：

.flex-item {
  flex: 0 0 100px; /* 三个值分别是：flex-grow(不放大)、flex-shrink(不收缩)、flex-basis(基准宽度100px) */
  height: 100px;
}

这样不管怎么拖拽窗口调整大小，每个子项都会牢牢保持100x100的正方形，空间不够时就自动换行，再也不会被挤变形啦。

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