弹性盒中的缩放机制是怎样的?

简介: 弹性盒中的缩放机制是怎样的?

弹性盒中的项目设置flex-grow属性定义项目的放大比例,默认值为0,值越大,放大越厉害,且不支持负值;


而flex-shrink属性定义项目的缩小比例,默认值为1,数值越大,缩小越厉害,同样不支持负值;


flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间,浏览器根据这个属性,计算主轴是否有多余空间。他的默认值为auto,也就是项目的本来大小。


注意:它可以设为跟width或height属性一样的值,比如给具体的像素值,则项目将占据固定空间。

例如

弹性盒子是基于总宽度减去子元素本身占据的宽度, 剩下的宽度, 按照弹性盒子的比例去分配, 比如总宽度是1440, 子元素占据的宽度2003=600 所以可以弹性的宽度是1440-2003=840,
剩下的宽度分成4份, 840/4=210, 所以第一个div: 200+210=410, 第二个div: 200+210*2=620 第三个div和第一个一样200+210=410

详细css弹性盒子布局,请看该链接: css3 flex弹性盒子布局梳理

相关文章
|
8月前
|
安全
轨道表面的裂纹、磨损和腐蚀是如何影响安全性的
轨道表面的裂纹、磨损和腐蚀是如何影响安全性的
78 0
|
机器学习/深度学习
深度学习数据增强方法-内含(亮度增强,对比度增强,旋转图图像,翻转图像,仿射变化扩充图像,错切变化扩充图像,HSV数据增强)七种方式进行增强-每种扩充一张实现7倍扩)+ 图像缩放代码-批量
深度学习数据增强方法-内含(亮度增强,对比度增强,旋转图图像,翻转图像,仿射变化扩充图像,错切变化扩充图像,HSV数据增强)七种方式进行增强-每种扩充一张实现7倍扩)+ 图像缩放代码-批量
|
3月前
如何实现图片垂直旋转90度的问题
如何实现图片垂直旋转90度的问题
22 2
|
5月前
|
C# 图形学 计算机视觉
使用归一化盒过滤器对图像进行平滑处理
使用归一化盒过滤器对图像进行平滑处理
55 0
|
6月前
|
容器
软件开发常见流程之物理像素导致图片变形问题如何解决,先把图缩放为原先的两倍,再缩放,利用Cutterman生成矢量图
软件开发常见流程之物理像素导致图片变形问题如何解决,先把图缩放为原先的两倍,再缩放,利用Cutterman生成矢量图
|
数据可视化 PyTorch 算法框架/工具
数据增强之裁剪、翻转与旋转
数据增强之裁剪、翻转与旋转
162 0
数据增强之裁剪、翻转与旋转
数据增强 | 旋转、平移、缩放、错切、HSV增强
数据增强 | 旋转、平移、缩放、错切、HSV增强
329 0
数据增强 | 旋转、平移、缩放、错切、HSV增强
|
Web App开发 前端开发 iOS开发
22、前端开发:Flex(弹性盒、伸缩盒)
22、前端开发:Flex(弹性盒、伸缩盒)
149 0
|
移动开发 UED HTML5
CSS3——伸缩布局,文字阴影,背景渐变缩放多背景,优雅降级和渐进增强
CSS3——伸缩布局,文字阴影,背景渐变缩放多背景,优雅降级和渐进增强
147 0
CSS3——伸缩布局,文字阴影,背景渐变缩放多背景,优雅降级和渐进增强

热门文章

最新文章