微信小程序页面布局方式 (react native也可以用)-温故而知新 (2)

微信小程序页面布局方式 (react native也可以用)-温故而知新

flex-flow

该属性是flex-direction和flex-wrap属性的缩写版本,它同时指定了伸缩容器的主轴和侧轴,其默认属性为row nowrap

flex-flow: flex-direction | flex-wrap

微信小程序页面布局方式 (react native也可以用)-温故而知新

justify-content

该属性用来定义伸缩项目沿主轴线的对齐方式

justify-content: flex-start | flex-end | center | space-between | space-around

1)flex-start伸缩项目向主轴线的起始位置靠齐

微信小程序页面布局方式 (react native也可以用)-温故而知新

2)flex-end 伸缩项目向主轴线的结束位置对齐,

微信小程序页面布局方式 (react native也可以用)-温故而知新

3)center伸缩项目向主轴线的中间位置靠齐

微信小程序页面布局方式 (react native也可以用)-温故而知新

4)space-around伸缩项目会平均的分布在主轴线里,两端保留一半的空间。

微信小程序页面布局方式 (react native也可以用)-温故而知新

5)space-between伸缩项目会平分在主轴线里,第一个伸缩项目在主轴线的开始位置,最后一个伸缩项目在主轴线的终点位置

微信小程序页面布局方式 (react native也可以用)-温故而知新

align-items

该属性用来定义伸缩项目在伸缩容器的交叉轴上的对齐方式

align-items: flex-start | flex-end | center | baseline |  stretch;

1)flex-start伸缩项目沿交叉轴的起始位置对齐

微信小程序页面布局方式 (react native也可以用)-温故而知新

2)flex-end沿交叉轴的结束位置对齐

微信小程序页面布局方式 (react native也可以用)-温故而知新

3)center伸缩项目沿交叉轴的中间位置靠齐

微信小程序页面布局方式 (react native也可以用)-温故而知新

4)baseline伸缩项目根据它们的基线对齐

微信小程序页面布局方式 (react native也可以用)-温故而知新

5)stretch伸缩项目在交叉轴方向拉伸填充整个伸缩容器

微信小程序页面布局方式 (react native也可以用)-温故而知新


align-content

用来调整伸缩项目出现换行后在交叉轴上的对齐方式,类似于伸缩项目在主轴上使用justify-content

align-content: flex-start | flex-end | center | space-between | space-around | stretch

1)flex-start伸缩项目向交叉的起始位置靠齐

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwsgpz.html