布局扩展-flex布局

flex布局

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

• 老版
  display:-webkit-box
  box容器
  容器的布局方向（控制主轴和侧轴分别是哪一根）：-webkit-box-orient:horizontal || vertical;
  容器的排列方向(控制主轴的正方向)：-webkit-box-direction:normal ||reverse;
  （富裕空间管理富裕空间的位置）
  富裕空间（主轴上的）： -webkit-box-pack:start(在右边（主轴为x）或下边) || end（在左边或上边） || center（在两边） ||justify(在项目之间)
  富裕空间（侧轴上的）： -webkit-box-align:start(下边或右边) ||end(上边或左边) ||center(两边)
  -老版本的富裕空间不随排列方向改变而改变
  box项目
  （弹性空间管理是把主轴的富裕空间按比例分配到项目上）
  弹性因子 ： -webkit-box-flex:1（默认值0）
  主轴
  侧轴
  项目永远在主轴的正方向上排列
• 新版
  display:flex
  flex容器
  容器的布局方向(主轴排列方向)：flex-direction:row ||column || row-reverse || column-reverse;
  富裕空间（主轴上的) ： justify-content:flex-start （主轴正方向（!新版本和老版本不同）|| flex-end（主轴反方向）||center (主轴两边)||space-between(项目之间) ||space-around(项目两边)
  富裕空间（侧轴上的）： align-items: flex-start(侧轴正方向) ||flex-end(侧轴的反方向) ||center（侧轴的两边） ||baseline(基线对齐) || stretch(等高布局（前提是项目没有高度）)
  flex项目
  flex:1;
  主轴
  侧轴
  项目永远在主轴的正方向上排列
• 注意点：-新版本flex比老版强大，但是移动端开发必须关注老版flex，因为有的移动端设备内核低只支持老版flex
  -老版本的box通过两个属性四个属性值控制主轴位置和方向
  新版本flex通过一个属性四个属性值控制主轴位置和方向
• 新版新增属性

 容器新增（侧轴上多行）
		   控制多行时堆砌的方向（控制侧轴的排列方向（正方向））：flex-wrap: wrap（下或右）|| wrap-reverse（上或左）||nowrap(不换行);
		   多行时侧轴的富裕空间： align-content: flex-start (富裕空间在侧轴正方向) ||flex-end（富裕空间在侧轴反方向）||center(两边) ||space-between(项目之间)||space-around(项目两边);
		   flex-flow(flex-direction和flex-wrap的简写属性，默认row nowrap)

	 项目新增
	   order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
	   align-self(单个项目的富裕空间管理)
	   flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
	   拉伸因子（弹性因子）： flex-grow(默认值为0)
	        可用空间=容器大小-所有相邻项目的总和
			可扩展空间=可用空间/所有flex-group的总和
			每项伸缩大小=（伸缩基准值+(可扩展空间*flex-grow的值)）
	   收缩因子：flex-shrink(起作用前提：flex-wrap:nowrap ;默认值1)
	        1计算收缩因子与基准值乘的总和
			2计算收缩因数
			  收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
			3移除空间的计算
			 移除空间=收缩因数*负溢出的空间
		flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

• 侧轴富裕空间的管理
  单行单列时
  align-items align-self（优先级高）
  多行多列时
  align-content（优先级高） align-self

flex:1

经常使用这个属性的情况：
1、子元素之间的等比例空间分配；
2、子元素所占剩余空间分配；