微信小程序----Flex布局-项目属性

最新推荐文章于 2023-03-05 11:12:27 发布

你爱我吗。

最新推荐文章于 2023-03-05 11:12:27 发布

阅读量172

点赞数

分类专栏： web 微信小程序文章标签： web

本文链接：https://blog.csdn.net/weixin_45343882/article/details/100120855

版权

33 篇文章 1 订阅

订阅专栏

19 篇文章 0 订阅

订阅专栏

设置容器内项目相关样式，用于设置项目的尺寸、位置，以及对项目的对齐方式做特殊设置。

order、flex-grow、flex-shrink、flex-basis、flex、align-self

沿主轴方向上的排列顺序order: 0（默认值） | <integer整数>
项目的收缩因子flex-shrink: 1（默认值） | <number>
项目的扩张因子flex-grow: 0（默认值） | <number>
项目width属性替代品flex-basis: auto（默认值） | <number>px
flex-grow、flex-shrink、flex-basis的简写方式：flex 属性
项目在行中交叉轴方向上的对齐方式align-self: auto（默认值） | flex-start | center | flex-end | baseline |stretch

作用：
设置项目沿主轴方向上的排列顺序，数值越小，排列越靠前，属性值为整数。
在这里插入图片描述

作用：
时当项目在主轴方向上溢出，通过设置项目收缩因子来压缩项目适应容器。属性值为项目的收缩因子，属性值取非负数
未设置flex-shrink时，默认flex-shrink值为1
在这里插入图片描述

一个宽度为400px的容器，里面的三个项目width分别为120px，150px，180px。分别对这项目1和项目2设置flex-shrink值为2和3。
在这个例子中，项目溢出 400 - (120 + 150 + 180) = -50px。计算压缩量时总权重为各个项目的宽度乘以flex-shrink的总和，这个例子压缩总权重为120 * 2 + 150 * 3+ 180 * 1 = 870。各个项目压缩空间大小为总溢出空间乘以项目宽度乘以flex-shrink除以总权重：

item1的最终宽度为：120 - 50 * 120 * 2 / 870 ≈ 106px
item2的最终宽度为：150 - 50 * 150 * 3 / 870 ≈ 124px
item3的最终宽度为：180 - 50 * 180 * 1 / 870 ≈ 169px

注意：其中计算时候值如果为小数，则向下取整。
当项目压缩因子相加小于1时，参与计算的溢出空间不等于完整溢出空间
总权重为：120 * 0.1 + 150 * 0.2 + 180 * 0.3 = 96。参与计算的溢出空间不再是50px，而是50 * (0.1 + 0.2 + 0.3) / 1 =30：
①item1的最终宽度为：120 - 30 * 120 * 0.1 / 96 ≈ 116px
②item2的最终宽度为：150 - 30 * 150 * 0.2 / 96 ≈ 140px
③item3的最终宽度为：180 - 30 * 180 * 0.3 / 96 ≈ 163px

场景：grow英文意思是<扩大，扩展，增加>，这就代表当父元素的宽度大于子元素宽度之和时，并且父元素有剩余，此时flex-grow就可以使得子元素扩张，分享父元素的空间。
取值：flex-grow的默认值为0，意思是该元素不索取父元素的剩余空间，如果值大于0，表示索取。
案例：

在这里插入图片描述

当容器设置flex-direction为row或row-reverse，flex-basis和width同时存在，flex-basis优先级高于width，也就是此时flex-basis代替width属性。
当容器设置flex-direction为column或column-reverse，flex-basis和height同时存在，flex-basis优先级高于height，就是此时flex-basis代替height属性。
需要注意的是，当flex-basis和width（或height），其中一个属性值为auto时，非auto的优先级更高。

flex-grow，flex-shrink，flex-basis的简写方式。
值设置为none，等价于00 auto。值设置为auto，等价于1 1 auto。

关注