• display:flex设置为块级弹性容器
• display: inline-flex设置为行内的弹性容器

弹性元素 弹性容器的子元素是弹性元素（弹性项），一个元素可以同时是弹性容器和弹性元素

flex-direction

flex box的两个轴：使用flex box时需要考虑两个轴：主轴和交叉轴（辅轴）。 主轴由flex-direction属性定义，而辅轴就是垂直于主轴的。
flex-direction指定容器中弹性元素的排列方式
可选值:

• row默认值，弹性元素在容器中水平排列（左向右）
  主轴自左向右
• row -reverse弹性元素在容器中反向水平排列（右向左）
  主轴自右向左
• column弹性元素纵向排列（自上向下）
• column-reverse弹性元素方向纵向排列（自下向上）

弹性元素的属性

flex-grow指定弹性元素的伸展的系数
当父元素有多余空间的时，子元素如何伸展。如果设置不同值，父元素的剩余空间，会按照比例进行分配
flex-shrink指定弹性元素的收缩系数
当父元素中的空间不足以容纳所有的子元素时，如果对子元素进行收缩。如果设置不同值，会按照比例进行分配

例子1：系数为0时候不会有任何变化

			.outer{
				font-size: 50px;
				width: 70%; /*设置父元素为页面宽度的70%*/
				border: solid;
				display: flex;
				flex-direction: row;
			}
			.outer div{
				width: 100px;
				height: 100px;
				flex-grow: 0;/*弹性元素的伸展系数为0*/
				flex-shrink: 0;/*弹性元素的收缩系数为0*/
			}

例子2：设定系数之后

			.outer{
				font-size: 50px;
				width: 70%; /*设置父元素为页面宽度的70%*/
				border: solid;
				display: flex;
				flex-direction: row;
			}
			.outer div{
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: chartreuse;
				flex-grow: 1;
				flex-shrink: 1;
			}
			.box2{
				background-color: yellow;
				flex-grow: 10;
				flex-shrink: 1;
			}
			.box3{
				background-color: palevioletred;
				flex-grow: 1;
				flex-shrink: 1;
			}

flex-basis元素基础长度

指定的是元素在主轴上的基础长度
如果主轴是横向的则该值指定的就是元素的宽度
如果主轴是纵向的则该值指定的是就是元素的高度
默认值是auto，表示参考元素自身的高度或宽度
如果传递了一个具体的数值，则以该值为准

flex

可以设置弹性元素所有的三个样式
flex= flex-grow flex-shrink flex-basic
可选值：

• initial = 0 1 auto
  
  
• auto = 1 1 auto
  
  
• none = 0 0 auto 弹性元素没有弹性

order

决定弹性元素的排列顺序，数字越大越靠后，可以联系一下z-index的用法

flex-wrap

设置弹性元素是否在弹性容器中自动换行
可选值:

• nowrap默认值，元素不会自动换行
• wrap元素沿着辅轴方向自动换行
• wrap-reverse元素沿着辅轴反方向换行

设置弹性容器之后，设置弹性容器的flex-wrap，则变化过程中会自动进行换行。

flex-flow

wrap和direction
flex-flow: row wrap；
flex-direction: row-reverse; flex-wrap: wrap; = flex-flow: row-reverse wrap;

justify-content

如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值:

• flex-start元素沿着主轴起边排列
• flex-end元素沿着主轴终边排列
• center元素居中排列
• space-around空白分布到元素两侧
• space-between空白均匀分布到元素间
• space-evenly空白分布到元素的单侧 //可能不兼容

			.outer1{justify-content: center;}
			.outer2{justify-content: space-around;}
			.outer3{justify-content: space-between;}

align-items

元素在辅轴上如何对齐
可选值:

• stretch默认值，将元素的长度设置为相同的值
• flex -start元素不会拉伸，沿着辅轴起边对齐
• flex-end沿着辅轴的终边对齐
• center居中对齐
• baseline基线对齐

			.outer1{align-items: center;}
			.outer2{align-items: flex-end;}
			.outer3{align-items: flex-start;}
			.outer4{align-items: stretch;}

align-self

属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
注意：align-self 属性可重写灵活容器的 align-items 属性。
如何分配主轴上的空白空间（主轴上的元素如何排列）
可选值:

• flex-start元素沿着主轴起边排列
• flex-end元素沿着主轴终边排列
• center元素居中排列
• space-around空白分布到元素两侧
• space-between空白均匀分布到元素间
• space-evenly空白分布到元素的单侧＊/

			.outer1{
				align-items: center;
			}
			.outer1 .box1{
				align-self: flex-end;
			}

align-content

辅轴空白空间的分布

			.outer1{align-content: center;}
			.outer2{align-content: flex-end;}
			.outer3{align-content: space-between;}
			.outer4{align-content: space-around;}