清云小程序教程十五：主轴与交叉轴一

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

今天我们来介绍flex里非常重要的一个新概念——轴。那么在flex里面有2个轴，一个叫”主轴“；一个叫”交叉轴“。等会儿我们来看一下主轴和交叉轴有什么意义和作用，现在我们先来实现一种效果。

先改一下我们的”justify-content“：

.container{
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:400px;
    background-color:#999999;
}

很明显”flex-direction“取”column“，” justify-content“取”center“时，这3个元素在垂直方向上呈现了居中的效果。

现在我想要让它在垂直方向上居中，同时我要求它在水平方向上也居中，也就是说，我希望这3个元素平移到中间来，让它即在垂直方向上居中，又在水平方向上居中，应该怎么做呢？大家抓住我刚才说的，有一个”即“，又有一个”又“。” justify-content“很明显它只能实现”即“，在垂直方向上居中，那么”又“，在水平方向上的居中又该怎么实现呢？

很明显，光光一个” justify-content“是不够的，我们需要两个方向的居中。flex布局里面还有另外一个属性叫做”align-items“。”align-items“同样也有很多取值，跟我们的” justify-content“的取值大致是相似，它也有一个”center“，那我们就先来试一下好了。

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

呈现的就是我们想要的效果：它即在垂直方向上居中，又在水平方向上居中了。

现在有2个属性了，一个” justify-content“，一个”align-items“，它们的取值也很相似，那么，它们到底有什么区别呢？这个时候就需要涉及到刚才我们说过的主轴和交叉轴了。在二维平面上面，主要有2个方向：一个是水平方向，一个是垂直方向。这2个方向刚好也对应了我们刚才说的轴，一个是主轴，一个是交叉轴。

那么，现在问题来了：到底水平方向上是主轴还是垂直方向上是主轴？这个其实是不确定的。不是说水平方向就是主轴，垂直方向就是交叉轴，并不是这样的。到底主轴是哪个方向，交叉轴又是哪个方向呢？这个是取决于“flex-direction”这个属性的取值的。

举一个简单的例子，就拿我们现在的示例来说，当“flex-direction”取“column”时，那么主轴就是垂直方向，这个很好理解吧。因为“flex-direction”取“column”，“column”是列，列是垂直方向上的，所以说主轴当然是垂直方向；那确定了主轴，交叉轴就很好确定了，交叉轴就是水平方向了。

我们确定了主轴和交叉轴之后，” justify-content“和”align-items“它们的意义就非常明确了。” justify-content“指的是主轴上的5个对齐方向，”align-items“指的就是交叉轴上的对齐方向了，这一点非常重要，大家一定要记牢了。再重复一遍，” justify-content“指的是主轴上的对齐，”align-items“指的是交叉轴上的对齐。

我们来做一个小练习，帮助大家更好的理解这个主轴和交叉轴。如果我要求这3个元素在水平方向上是居中的，而在垂直方向上是靠上对齐的，应该怎么做呢？那么我们需要先把我们的垂直方向和水平方向着个方向转化成我们的主轴和交叉轴。现在呢，我们在水平方向上已经是居中的了，那么只要在改变垂直方向就可以了。现在大家告诉我垂直方向是主轴还是交叉轴？主轴。因为“flex-direction”取的是“column”，所以垂直方向是主轴，刚才已经说过了，” justify-content“是决定主轴的，那么我们现在需要改的就是” justify-content“。

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

再来看看效果：

已经实现了我们的效果。

我们总结一下啊，遇到这种问题最关键的一个思维步骤是什么？最关键的思维步骤就是你能够把水平方向以及垂直方向与我们的主轴和交叉轴对应起来。其实解决这类问题的思路是很清晰的。首先，如果我们想在某一个方向上进行对齐的调整的话，这个很好理解，我们到底是要在水平方向上调节还是在垂直方向上调节，那么，我们其实只需要知道，当前的垂直方向到底是主轴还是交叉轴，是主轴你就调整” justify-content“，是交叉轴你就调整”align-items“，就是这么简单。

下面我们来看一下，当“flex-direction”取的是“row”，又是怎么样的呢？我们还是还原到最简单的时候：

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

显示：

其实这也是再给大家重复联系，帮助大家更好的理解。那么现在哪个是主轴，哪个是交叉周了呢？很好理解，“row”代表的是行，那么水平方向就是主轴，既然确定了水平方向是主轴，那么自然垂直方向就为交叉轴。现在，我想让这3个元素顶在上部，靠上对齐，那么应该修改哪个属性呢？

我们还是来分析一下：向上对齐很明显是垂直方向上的一个调整，那么垂直方向是什么轴呢；当前我们的“flex-direction”取的是“row”，所以，垂直方向是交叉轴。既然是交叉轴，那么我们就来调整它的”align-items“。

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

现在看看运行的结果：