第三讲 弹性盒子（align-self属性、order属性、flex-grow属性、 flex-shrink属性、flex-basis属性、flex属性）

一、弹性盒子项目属性

属性	描述
flex-grow	设置或检索弹性盒子元素的扩展比率.
flex-shrink	指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex	设置弹性盒子的子元素如何分配空间。
flex-basis	用于设置或检索弹性盒伸缩基准值
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性
order	设置弹性盒子的子元素排列顺序。

1、order属性

语法：.flex-container .flex-item { order: 值; }

值：用整数值来定义排列顺序，数值小的排在前面。可以为负值，默认为0。

2、flex-grow属性

语法： .flex-container .flex-item { flex-grow:值; }

值：一个数字，规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

3、 flex-shrink属性

语法： .flex-container .flex-item { flex-shrink: 值; }

值：一个数字，规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

4、 flex-basis属性

语法： .flex-container .flex-item { flex-basis: 值 | auto; }

值：一个长度单位或者一个百分比，规定元素的初始长度。
auto：默认值。长度等于元素的长度。如果该项目未指定长度，则长度将根据内容决定。

5、flex属性

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

6、align-self属性

语法：.flex-container .flex-item {
 值：  align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}

值	描述
auto	默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。stretch元素被拉伸以适应容器。
center	元素位于容器的中心。
flex-start	元素位于容器的开头。
flex-end	元素位于容器的结尾。
baseline	元素位于容器的基线上。