欢迎光临带式输送机网站,我们是进行标准化生产出售

带式输送机生产厂家_煤矿带式传动装置_标准矿用倾角输送带
带式输送机

提供各行各业全方位的生产设备服务

28-(flex)伸缩布局/弹性布局

作者:jcmp      发布时间:2021-04-23      浏览量:0
justify-content:取值;j

justify-content:取值;

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

示例链接:

http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=initial。

align-items: flex-start;

align-items: flex-end;

align-items: center;

align-items: baseline;

align-items: stretch;

宽度不够也不换行, 默认取值

flex-wrap: nowrap; 宽度不够也不换行, 默认取值 flex-wrap: wrap; 如果当伸缩容器宽度不够时, 不想让伸缩项被压缩, 也可以让系统换行flex-wrap: flex-wrap: wrap-reverse; 伸缩容器多行显示,ltr排版下,伸缩项目从右向左排列; rtl排版下,伸缩项目从左往右排列(与wrap相反)。

总结:

参数说明:

8、伸缩项缩小比例

2.计算每个伸缩项需要压缩的宽度2.1计算溢出的宽度伸缩容器的宽度 - 所有伸缩项的宽度总和400 - 600 = -2002.2计算总权重每个伸缩项需要的份数 * 每个伸缩项的宽度1 * 200 + 2 * 200 + 3 * 200 = 12002.3计算每个伸缩项需要压缩的宽度溢出的宽度 * 需要的份数 * 每个伸缩项的宽度 / 总权重-200 * 1 * 200 / 1200 = -33.33注意点:flex-shrink: 默认值是1与flex-grow类似,也是处理伸缩容器额外空间的属性,不同的是,flex- grow处理的是伸缩容器内部剩下的额外空间,而flex-shrink处理的是伸 缩容器外部溢出的额外空间。上例中将溢出的额外空间分成4份,收缩 比例为1的占1份,收缩比例为2的占2份,如果不设置收缩比例,默认的 比例为1。

10、伸缩项宽度 如果是伸缩布局, 除了可以通过元素的width属性来设置宽度以外, 还可以通过flex-basis属性来设置伸缩项的宽度。

flex: flex-grow flex-shrink flex-basis; 默认值: flex: 0 1 auto; 注意点: 在连写格式中, flex-shrink flex-basis是可以省略的 /* flex: 1 1 200px; */ flex: 1;