摘要
flex布局是小程序的主流布局之一,在写布局的时候总是无法避免align-items与align-content这两个属性,除了知道它们是控制交叉轴的对齐方式,但究竟什么时候用哪个,只能这个不行,就换那个,今天就来搞明白他们的异同。
要点
1、交叉轴是水平方向还是垂直方向?
交叉轴是相对于主轴来说的,主轴就是flex-direction中设置的方向。
若flex-direction:row
,则主轴方向为水平方向、交叉轴方向为垂直方向;
若flex-direction:column
,则主轴方向为垂直方向,交叉轴方向为水平方向。
2、align-items与align-content之间的相同之处?
a.都是弹性容器的属性来控制弹性项目
b.都是控制交叉轴(即弹性容器内垂直方向,水平方向由justify-content控制)的对齐方式
3、align-items与align-content之间的不同之处?
很多地方都说单行用align-items,多行用align-content,但是笔者认为不准确,且很容易带来误解。因为这只是针对flex-direction:row
来说的。
现详细分析:
以flex-direction:row
为例,首先需要知道要让flex布局换行需要设置flex-wrap属性,其默认值为nowrap,意思是弹性项目因为横向空间不够会被压缩在一行,只有设置为wrap或者wrap-reverse,才不会被压缩而换行。
换行后就变成了多行,这时候align-items就失效了,需要设置align-content才有效。
若flex-direction:column
,上述的行就变成列,只有设置为wrap或者wrap-reverse,且纵向空间不够才会换列,多列的时候align-items就失效,需要设置align-content才有效。
上述分析以图为证
align-items有效,align-content无效
align-items无效,align-content有效
分析工具
路径:分析工具>wxss样式调试工具>flex弹性布局