清云小程序教程十六：主轴与交叉轴二

原文链接：http://www.0575yun.com/articledetail/id/67.html

上节课我们介绍了主轴和交叉轴，这节课我们再来深入讲解一下主轴和交叉轴。其实对于主轴和交叉轴大家充分理解上节课讲的内容就可以了，但是，出于知识的严谨性和全面性，我还是在这里进一步在来讲解一下主轴和交叉轴。

上节课我们讲了，当”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个取值！所以说，你只要弄清楚主轴到底是水平方向还是垂直方向，剩下的细节，我个人认为是没有必要去死记硬背的；即使你现在记下来了，时间一长，你也有可能会忘记的，所以没有太大的必要。

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

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