本节课的.slider-item-container为什么宽度是100%

我理解是500%，这样才能装得下5张图，为什么这里是100%？

源自：移动端事件 4-2 幻灯片的HTML和CSS

收起

3回答

好帮手慕夭夭回答被采纳获得+3积分 2020-03-07 19:32:06

同学你好，这个是因为设置了flex布局，就是因为设置了flex布局才会出现这样的情况。原理老师已经说了，每一张图片的宽度，是空间的100%，而不是父元素的100% ，所以总宽度不是500%。如果你理解不了，就固定记住就行，因为空间是设置了flex布局之后，自动计算并分配的。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

好帮手慕夭夭 2020-03-07 16:38:41

同学你好，不要这样计算，100%不要叠加。5张图片实际占用的就是100% 。因为空间被压缩了，每一张图片的宽度，是空间的100%，而不是父元素的100%。这里可能不太好理解，不需要纠结这里，同学只要记住，几张图片占用的总宽度就是100%，而不是500%就行。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

好帮手慕夭夭 2020-03-07 12:23:37

同学你好，因为这里使用了flex布局。可以去掉flex-shrink：0看一下效果，5张图片由于flex布局，空间不够，所以被挤压。

flex-shrink 属性规定 flex 元素的收缩规则，flex 元素仅在默认宽度之和大于容器的时候才会发生收缩。通俗的讲，就是超出的空间会被flex元素吸收，而flex-shrink:0可以用于防止控件压缩变形，如下：

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

提问者迷失的小麦 #1

flex布局，盒子实际宽度依然是100%，设置flex-shrink之后每张图片的实际宽度是100%，也就是说5张图片就是500%。既然图片的实际宽度是500%，为什么盒子设置100%（如果5张图片总宽度100%每张图片就会被压缩）

2020-03-07 13:24:37