在Flexbox中,有“主轴”和“横轴”的概念。通常,在浏览器中,“主轴”是水平的,大概是因为台式机和笔记本电脑的屏幕通常是横向的;而在React Native中,“主轴”通常是垂直的,因为它主要用于电话,而电话通常是纵向。这些中的任何一个都称为“主轴”,另一个则称为“横轴”。
似乎在Flexbox中,许多影响主轴的属性也有一个对应的名称,其名称会影响横轴。
有一个叫做的属性flex-grow
,另一个叫做的属性flex
可以同时完成flex-grow
和其他一些工作。
我不清楚的是这是否flex-grow
是具有对应项的属性之一,还是一个例外。这同样适用于该flex
财产。
原因之一,我想问的是,我经常读,试图让你的布局时的权利,你可以在线阅读,你可能需要设置flex
到1
你的元素及其所有计数器/父元素。但是,在布局中哪些位置需要实现相同的目标,但在横向方向又如何呢?
的flex-grow
(和速记flex
)属性总是影响主轴线,具有没有对应,并设置如何水平分布的自由空间为柔性行方向和垂直方向上为柔性列方向。
相比之下,例如,该justify-content
属性影响主轴,而该属性影响主轴,则align-items
影响交叉轴,两者均设置弹性项目的对齐方式。
但是,这里令人困惑的是,基于流动方向,它们会水平或垂直地影响柔韧性项目。
请注意,主轴和横轴与屏幕是宽还是高无关。
它与流向有关,因此对于默认的flex行方向,主轴是水平的,交叉轴是垂直,对于flex列方向,主轴是垂直的,交叉轴是水平。
一篇非常好的文章是《 Flexbox的完整指南》,其中对此进行了更全面的解释。