flex弹性布局需要注意的地方

1. 默认情况下容器flex-wrap: nowrap;项目不换行，项目单行显示，容器空间不足时，项目宽度会被压缩

   .box {
   	flex-wrap: nowrap;
   }
   

   

2. 当给容器设置了flex-wrap: wrap;时，容器空间不足时，项目在容器内排布会进行换行，此时项目不会被压缩

   

3. 项目的flex-shrink属性定义了项目的缩小比例，默认为1，即空间不足，该项目将缩小。在容器设置flex-wrap: nowrap;不换行的情况下，将所有项目的flex-shrink: 0;项目不会压缩，容器空间不足的话会出现横向滚动条

   .box {
   	flex-wrap: nowrap;
   	.item {
   		flex.shrink: 0;
   	}
   }
   

   

图片来自菜鸟教程