问答详情
源自:10-8 CSS3 伸缩布局(一)

项目移动并不是简单的垂直对其和水平对其,他是根据主轴方向来的。

来让我们先看看默认的主轴和侧轴方向

  • 主轴起点 Main Start

  • 主轴终点 Main End

  • 主轴方向 Main Direction (有时候也成为伸缩流方向 Flow Direction)

  • 侧轴起点 Cross Start

  • 侧轴终点 Cross End

  • 侧轴方向 Cross Direction

http://img.mukewang.com/55a06f250001e91606400426.jpg


  • row-reverse: 主轴起点和主轴终点交换。如果书写模式是从左至右,伸缩项目则是从右往左显示。

  • column: 主轴和侧轴交换。如果书写系统是垂直的,那么伸缩项目也是垂直显示的。

  • column-reverse: 和 column 一样,但是方向相反。

当你设置column属性的时候,其主轴变换成垂直的而伸缩容器的 justify-content 属性用于调整主轴上伸缩项目的位置,所以就可以解释column为什么用justify-content来对齐。

http://c7sky.com/dive-into-flexbox.html以上来自此网站有兴趣的同学可以看看,

提问者:慕斯0315010 2015-07-11 09:26

个回答

  • q_Amily
    2016-07-24 23:18:22

    就是这样,谢谢

  • 慕_男神
    2016-01-05 14:26:09

    很好,谢谢!