弹性盒子---flex

flex弹性布局
概念:flex是flexible Box的缩写,意味’弹性布局’,用来为盒状模型提供最大的灵活性,采用flex布局的元素,称为flex容器,简称’容器’,他的子元素自动成为容器成员
使用:display:flex或inline-flex ,那么这个元素就成为容器==>弹性盒子
特点:子元素会自动成为容器成员我们可以称他们为项目item
注意:定义成flex以后,容器里面浮动将会失效,float , clear , vertical失效,默认子元素不会自动换行
父元素属性

	flex-wrap: nowrap (默认)不换行
	  	wrap换行  第一行在上方
	 	wrap-reverse换行 第一行在下方
	 	
	flex-direction:row 从左到右
		row-reverse从右到左
		column从上到下
		column-reverse从下到上
		justify-content:flex-start向主轴起点对齐
		
	flex-end向主轴结束点对齐
		center 居中
		space-between 两边贴边，平均分配剩下空间
		space- around 平均分配多余空间
		align-items:flex-start 向侧轴起点对齐
	    flex-end 向侧轴结束点对齐
	    center居中
	     baseline 以文字基线对齐
	     
	align-content:flex-start向侧轴起点对齐
		flex-end向侧轴结束点对齐
		center居中
		space-around每根轴线两侧的间隔相等
		space-between向侧轴两端对齐，每根轴线之间距离相等
		
	flex- flow :row wrap  可以同时设置主轴对齐方式和要不要换行
	

子元素属性

	order 定义项目的排列顺序 数值越小排列越靠前，默认值是0
	
	flex-grow定义项目的放大比例 默认值为0 
	
	flex-shrink定义项目的缩小比例默认值为1      0不参与
	
	flex-basis 定义项目在容器中所占空间大小
	
	flex: 0  1  auto   可以同时定义放大 ，缩小 ，所占空间大小
	
	align-self允许单个项目与其他项目有不同的对齐方式