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

原文链接：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;
}

现在看看运行的结果：

已经实现了我们的效果。如果大家还不能够很好的理解的话，希望大家私底下都去练练，帮助自己更好的记忆，因为理解主轴和交叉轴真的很重要。

清云小程序教程十五：主轴与交叉轴一相关推荐

清云小程序教程十六：主轴与交叉轴二
原文链接:http://www.0575yun.com/articledetail/id/67.html 上节课我们介绍了主轴和交叉轴,这节课我们再来深入讲解一下主轴和交叉轴.其实对于主轴和交叉轴大家 ...
使用mpvue开发小程序教程（五）
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
微信小程序+.NET(十五) 小程序录音无法播放
2019.08.23 在刚才遇到一个很奇葩的问题,在前几天给同事展示这个项目时,那天前的晚上清过一次整个小程序的缓存,当天启动时报了各种问题,登陆.位置授权.甚至一些内置方法都报错,更无法加载最重 ...
微信小程序教程 [第五篇]脚本语言（WXS）
这是微信小程序近期引入的一个概念,我们可以在开发者工具中直接以独立文件的形式建立它们. 当然你也可以使用wxs标签直接在wxml文件中使用. 两种访问均可以. 使用场景:比如我们可以在视图里直接纳入简 ...
使用mpvue开发小程序教程（一）
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
使用mpvue开发小程序教程（三）
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
【微信小程序开发（云壁纸小程序教程）】
微信小程序开发(云壁纸小程序教程) 1. 准备 HBuilder X 和微信开发者工具 2. 进入网站注册小程序 3. 点击发行,这时候就用到微信开发者工具 1. 准备 HBuilder X 和微 ...
【Visual C++】游戏开发笔记四十七浅墨DirectX教程十五翱翔于三维世界：摄像机的实现...
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接:http://blog.csdn.net/zhmxy555/article/details/8657656 作者:毛星云(浅墨) ...
【Visual C++】游戏开发笔记四十七浅墨DirectX教程十五翱翔于三维世界：摄像机的实现
本系列文章由zhmxy555(毛星云)编写,转载请注明出处. 文章链接: http://blog.csdn.net/zhmxy555/article/details/8657656 作者:毛星云( ...

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

清云小程序教程十五：主轴与交叉轴一相关推荐

最新文章

热门文章