T.T
常见属性:
isEnabled:是否启动yoga布局
justifyContent:设置子容器在主轴方向上的对齐方式
alignitems:设置子容器在交叉轴(跟主轴方向相反)的对齐方式
align-content 管理项目换行时行之间的空间。align-items 当项目的大小不同时,将项目相对于彼此对齐。当项目的大小相同并且只有一行时,它们的行为相似。
flexgrow:瓜分父容器剩余的空间,按比例来,例如容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px,子项2占用的基础空间是70px,子项3占用基础空间是100px,剩余空间为 400-50-70-100 = 180px。 其中子项1的flex-grow: 0(未设置默认为0), 子项2flex-grow: 2,子项3flex-grow: 1,剩余空间分成3份,子项2占2份(120px),子项3占1份(60px)。所以 子项1真实的占用空间为: 50+0 = 50px, 子项2真实的占用空间为: 70+120 = 190px, 子项3真实的占用空间为: 100+60 = 160px。
flexwrap:换行
flexbasis:
- 对于子项1,flex-basis 如果设置默认是auto,子项占用的宽度使用width 的宽度,width没设置也为 auto,所以子项占用空间由内容决定。
- 对于子项2,flex-basis 为auto,子项占用宽度使用width 的宽度,width 为70px,所以子项子项占用空间是70px。
- 对于子项3,flex-basis 为100px,覆盖width 的宽度,所以子项占用空间是100px。
flexshrink:表示当所有子容器加起来的宽度或高度超过了父容器的收缩比率,默认1 例如:容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px,子项2占用的基准空间是150px,子项3占用基准空间是100px,总基准空间为 250+150+100=500px。容器放不下,多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1), 子项2 flex-shrink: 2,子项3 flex-shrink: 2。子项1需要吸收的的空间为 (250*1)/(250*1+150*2+100*2) * 100 = 33.33px
,子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为(150*2)/(250*1+150*2+100*2) * 100=40px
,子项2真实空间为 150-40 = 110px
。子项3吸收的空间为(100*2)/(250*1+150*2+100*2) * 100 = 26.67px
,真实的空间为100-26.67=73.33px
。
applylayout...方法:开始计算yoga布局,一般放在最后或者要更新布局的时候