设置主轴的方向。 默认的主轴是 横向 的，从左到右排列，另一条轴叫做 交叉轴，  也就是我们理解的纵向，

row：默认值，主轴横向的，从左向右排列

row-reverse：主轴还是横向的，只是里面项目的 排列方式不一样， 是从右向左的。

column：把主轴变成 纵向的，排列方式 也就变成了，从上向下

column-reverse：主轴变成 纵向的，排列方式颠倒， 从下向上排列。

flex-start：默认值 对齐起始位置，第一个子元素的起始位置，然后其他子元素向它看齐

flex-end：跟上面相反的，也就是说，人家对齐在开始，这个对齐在 最后面

center：居中对齐

space-between：如果有多余的空间，就会平均分布，每个子元素的 两边空白空间保持一致(头尾的子元素 贴边 )

space-around：如果有多余的空间，就会平均分布，每个子元素的 两边空白空间保持一致(头尾的子元素 不会贴边 )

既然学了纵向 和  横向的对齐方式， 那么现在就用他来设置 一下，我们平常的 居中功能

我们平常设置居中， 是不是要设置 position： 然后就left  calc  50% - 去子元素的 宽一半，  然后再去计算 top？  很麻烦对吧。

看看以下的方法，是不是简单了许多

align-content 跟上面的 align-items 的区别就是，一个是操作单行的，一个是操作多行的。  参数都是一样的设置， 除了多了两个 space-betwwen  ，space-around

设置纵向的对齐方式(多行)

flex-start：

flex-end：

center：

space-betwwen

space-around

stretch

接下来的几个属性，都是设置在 子元素上的

单独设置对齐方式。如果父元素有设置 align-items的话， 会被子元素给替代掉，也就是，align-self 和 align-items同时设置, 会采用子元素的align-self 对齐方式

但是，如果是  align-self 和 align-content 同时设置， 会采用 父元素的 align-content的 对齐方式

auto：默认值，也就是遵从 父元素 align-items 的对齐方式。

flex-start：对齐起始位置

flex-end：跟上面相反的，也就是说，人家对齐在起始位置，这个对齐在 最下面

center：居中对齐

baseline:   基线对齐

stretch:   如果没有设置子元素高度，那么全部子元素的高度都会被拉伸

设置数值，来决定他们的排列顺序

0：默认值

数值越小，越靠前  支持负数(-1)

设置数值来 自定义 扩展的比例，（不支持负值）

默认值：0 (也就是，不用扩展)

还有最后一点，这也是最冷门的知识点。flex-shrink 参与计算的不是盒子的宽， 而是内容区的宽， border 和  padding 都不用加进去计算的。只计算content

如果这个属性呢， flex-basis: 100px  你这样设置，他跟 width: 100px的效果是一样的。

其实把，flex-basis 和 width 两个一起设置，是有用意的。flex-basis 是决定了 元素宽度的 最小值， width，是决定了元素宽度可撑开的 最大值。