-
默认情况下容器flex-wrap: nowrap;项目不换行,项目单行显示,容器空间不足时,项目宽度会被压缩
.box { flex-wrap: nowrap; }
-
当给容器设置了flex-wrap: wrap;时,容器空间不足时,项目在容器内排布会进行换行,此时项目不会被压缩
-
项目的flex-shrink属性定义了项目的缩小比例,默认为1,即空间不足,该项目将缩小。在容器设置flex-wrap: nowrap;不换行的情况下,将所有项目的flex-shrink: 0;项目不会压缩,容器空间不足的话会出现横向滚动条
.box { flex-wrap: nowrap; .item { flex.shrink: 0; } }
图片来自菜鸟教程