教程十六:小程序布局之主轴与交叉轴二

上节课清云小程序教程讲了,当”flex-direction“取”column“或“row”的时候相应的主轴和交叉轴,但是我们知道 ”flex-direction“总共有4个取值,另外2个取值分别是“column-reverse”和“row-reverse”。这节课清云小程序教程就要来探讨一下,如果说”column“或“row”后面加上了“reverse”,那么它的主轴和交叉轴又是怎么样的呢?会有变化吗?

就目前我们的小程序示例情况,不加“reverse”的话很明显主轴是水平方向,那么如果我们加了这个“reverse”,主轴现在是哪个方向呢?


.container{
    display:flex;
    flex-direction:row-reverse;
    justify-content:center;
    align-items:flex-start;
    height:400px;
    background-color:#999999;
}

其实,即使你加了“reverse”,主轴依然是水平方向。这个水平方向大家仔细想一想,它其实也可以分为:从左向右的水平方向和从右向左的水平方向。


从箭头的方向可以看出,2个都是水平方向。所以说,“row”和“row-reverse”主轴都是水平方向,只是“row”代表的是从左到右的水平方向;而“row-reverse”代表的是从右到左的水平方向。这一点大家一定要知道,那么同理,对于垂直方向上也有2个方向,”column“就代表了从上到下的竖直方向;而“column-reverse”则代表了从下到上的竖直方向。

现在小程序的”flex-direction“就代表了小程序的4个方向。大家如果觉得文字版的教程不够清楚,大家也可以去搜一些视频来看,这里清云小程序教程要说的是,视频虽然会比较清晰,但是文字版的确要比视频来的详细,记录比较全面。大家也看到了,前面包括这节课,清云小程序教程都是讲的比较细碎的,就是希望大家都能够对这些知识有一个比较全面的了解。因为之前也碰到过,有些面试官喜欢问一些比较小的理论知识点,这里讲解的比方说,当”flex-direction“取”column“这个主轴是什么,从哪个方向开始的?虽然在实际应用上大家也不会刻意去记这些知识,但是在小程序教程中还是要提一下。

当然,这里也不是说看了文字版就能够会这些知识了,大家还是要去多做练习,比对着清云小程序教程做大量的练习,熟练了也就把这些知识融会贯通了。

当然这些知识,也不需要你去死记硬背,大家还记不记得,前面清云小程序教程已经说过了,如果当”flex-start“不能够满足时,那就去试试换成”flex-end“是不是就能够满足,无非就是这2个取值!所以说,你只要弄清楚主轴到底是水平方向还是垂直方向,剩下的细节,我个人认为是没有必要去死记硬背的;即使你现在记下来了,时间一长,你也有可能会忘记的,所以没有太大的必要。

实际情况下,你只要在工作中能够应用这些知识点来解决在问题就可以了,不需要强行记住,能够灵活应用才是最好的。主要还是要理解原理,这一点希望大家知道,也是非常重要的。

所以说还是要对照小程序教程多多练习,把知识都融会贯通了,自然也就理解了这些知识的原理了。所以说还是希望大家私底下多去练习练习。


版权保护: 本文由 清云小程序 原创,转载请保留链接: http://www.0575yun.com/articledetail/id/67.html