第七十九章 对齐

前面我们从来没在对齐这个问题上犯过难。

这次么，也还行，反正就是三个情况，每个情况分两个方向（主轴方向和侧轴方向），结合之后六个属性而已。这些属性的取值都差不多，反正相似的地方很多，所以就是学习一个取值多点的属性，然后区分应用的意思。

那我们先来学几个单词哦：justify，别问我这个单词啥意思，我就知道在描述对齐的时候，有它就是主轴方向，默认横向，左右方向上。与之对应的是 align，这是侧轴上，默认纵向，就是上下方向。这一点和我们前面的 text-align 相反，相反啊！这就很吐艳！！不容易记忆啊！！！不过还好，这次是被当做前缀，所以，在前后这件事情上也相反，这就好记忆了。

这是两个前缀，能记住了吧。

三个后缀：

• content 是说把所有子元素看做一个整体，然后再父元素中如何摆放；
• items 是说一行或者一列在相应方向上如何对齐；
• self 是说某一个元素在相应方向上如何对齐，即对于上一个属性的个别修正；

所以，前两个是整体属性，最后一个是个体属性。

你把这些区分开以后，其他已经不重要了。因为问题的关键已经在手里了，还能翻出什么花样呢？

开始解释取值，注意以下只是一些常见的单词解释，并不是每个属性都可以使用这些值。我只是先把一些有共通点的东西整理在一起解释，便于大家理解。后面会附上详细说明的。

• stretch： 拉伸，拉伸到填充满（也可能是和在同一个轴上的元素一样高或者宽），所以对于弹性布局，在主轴方向上肯定不能使用这个值；
• center： 就是中间，某个方向上的中间，不解释；
• start、end： 有这俩单词就是开始或者结束，注意轴的方向，再确定哪里是开始，哪里是结束；
• baseline： 基于基线对齐，但是什么是基线呢？我们在当前元素中写一个 X，注意这个 X 没有被嵌套在其他元素之中，就是当前元素里面去写，好了，这个 X 的底边位置就是基线；
• space-between： 首先 space 是空白，所以有这个单词的属性值都是在说我们怎么把余下的空白进行合理分配，而分配空白这个事情，是一个很全聚德全局的事情，所以只有带 content 的属性可以才用。between 是在什么之间，这里就是在两个子元素之间，所以子元素和父元素之间没有空白。即两端顶边，中间平均分配空白；
• space-around： around 是环绕，所以在每个元素上环绕空白的话，两个子元素之间就是两倍空白，而子元素和父元素之间是一倍空白。请自行画图理解，喵唧~；
• space-evenly： evenly 平均分配，管他什么父元素与子元素之间，还是子元素与子元素之间，统统相等。

其实说到这里，对齐这个问题就已经说完了，但是好像很不直观，所以我们需要用图片来说明一下。（我最讨厌的环节，做图片太麻烦了）

那么，我们为什么不用代码呢？

<div class="flex-box"><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div><div class="flex-item"></div></div>

.flex-box {display: flex;flex-wrap: wrap;border: 5px solid #DEDEDE;}.flex-item {min-width: 100px;min-height: 100px;background: #DEDEDE;border: 2px solid white;}

这是除了自动换行就没加任何调整的默认状态，用起来特别简单，就这样还有人敢说不会，小耗子要不是身材太好，早打死你了。

你说横向上没填满啊，那你可以拉伸子元素啊，设置子元素的拉伸就好了，我就不演示了。我们只是修改某一个属性，来对比各个值之间的差异，所以代码我也不写了（因为都一样，就一个属性的值在变化）。然后，这一章字数也不少了，下一章开始演示吧。