【css中flex属性】固定宽度被挤压 flex为1的元素宽度超出父元素

html-css020

【css中flex属性】固定宽度被挤压 flex为1的元素宽度超出父元素,第1张

当子元素设置固定宽度，如果整体宽度不足时，会把固定宽度给压缩，解决方法: 给固定宽度的元素添加flex-shrink:0。

flex-shrink

指定了 flex 元素的收缩规则。

设置右边元素flex：1，当右边元素宽度超过父元素时，会造成右边宽度溢出。

解决方案：给右侧设置了flex:1的元素，同时设置width:0

简单的说，CSS3把很多以前需要使用图片和脚本来实现的效果，只需要短短几行代码就能搞定。

1、CSS进行渐变背影的设置，在background中添加了linear-gradient线性渐变，

background: linear-gradient(yellow 0%, #000 80%)/*从0%黄色到80%黑色的渐变*/

2、CSS 3D

perspective:查看视图的位置，如拍照时的镜头位置一样。

transform-style中preserve-3d，设置了此属性时，将子元素包裹在一个3D视图里。

3、CSS animation

说到动画就不得不说jQuery的animation。但有了CSS3后就再也不用JS进行制作动画了。

keyframes定义帧动画，可根据百分比进行设置，也可利用from和to的方式进行设置。

利用animation引用定义好的keyframes帧动画。animation:rotate 20s infinite linear/*设置引用的动画，动画时间，动画的timing-function,动画方式*/

4、CSS filter

fileter并非IE的过滤器，是CSS3中新添加的属性。

包含效果有：grayscale灰度，sepia褐色，saturate饱和度,hue-rotate色相旋转,invert反色,opacity透明度,brightness亮度,contrast对比度,blur模糊,drop-shadow阴影.

挤压效果就是利用filter中的blur加saturate混合而来

flex-shrink 属性定义了项目的缩小比例，默认为1

即如果空间不足，该项目将缩小，它还有另外一个值，就是0

如果在子元素的 css 样式中添加 flex-shrink 属性， 然后把值改为 0

flex-shrink：0 ，那么当前元素就不会被其他