CSS知识点6

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

1.对齐方式

　  align-self：

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

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

参数：

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

　　flex-start：对齐起始位置

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

　　center：居中对齐

　　baseline: 基线对齐

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

二.　order：

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

参数：

　　0：默认值

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

三.flex-grow:

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

参数：

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

四.flex-shrink: (flex-shrink的真实计算公式)

设置子元素们的宽加起来大于 父元素宽时，要怎么压缩 成一行，

参数：

　　1：默认值(超出的话，就按照 比例1 压缩)

五.flex-basis：

(如果使用了flex-direction 改变了主轴的方向，那么他控制的，就变成了高度。不是宽度，也就是说，横向控制宽度，纵向控制高度)

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

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

六.flex：

他是 flex-grow  flex-shrink flex-basis 的缩写形式

　　flex：1  1  20%；

代表的是，可以伸缩，该元素的最小宽度是 20%。