flex 布局下侧轴的方向

这是个很有意思的问题,我一开始对于主轴和侧轴的理解是类似于x轴,y轴;他们一定是互相垂直,且侧轴应该在主轴顺时针90度的位置。 就好比canvas的x轴,y轴坐标一样,但事实却不是这样。

主轴的方向可以用flex-direction来确定,侧轴的方向则是人们习惯的阅读方向,内容(主轴)水平时候,阅读方向应该是从上到下,内容(主轴)竖直的时候,阅读方向应该是从左到右。也就是说影响侧轴方向的第一个因素就是主轴的方向,主轴水平,侧轴从上到下;主轴竖直,侧轴从左到右。即使主轴是水平反向,侧轴依然是从上到下。

影响侧轴方向的第二个因素就是换行,也就是flex-wrap,只有当它的值为反向换行(flex-wrap:wrap-reverse)时,侧轴会反向。也就是说,如果不存在换行,且换行值不为反向换行,侧轴方向还是遵循大家的阅读习惯的。

原文地址:https://www.cnblogs.com/grey-zhou/p/5735829.html