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

来源:10-8 CSS3 伸缩布局(一)

慕斯0315010

2015-07-11 09:26

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

  • 主轴起点 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以上来自此网站有兴趣的同学可以看看,

写回答 关注

2回答

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

    就是这样,谢谢

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

    很好,谢谢!

十天精通CSS3

本课程为CSS3入门教程,深刻详解CSS3知识让网页穿上绚丽装备

242553 学习 · 2623 问题

查看课程

相似问题