flex相关属性

flex相关属性

    弹性盒布局:display:flex; display:inline-flex;(两个元素会在一行显示)
		作用: 控制子集在"主轴"上排列
		显示规则:所有的子元素都会在主轴上排列
			默认x为主轴
			如果设置x为主轴,那y为侧轴
			如果设置y为主轴,那么x为侧轴
	设置方法: 父元素必须为弹性盒 display:flex;
			
	设置为display:flex;
		1: 弹性盒,子元素默认在主轴排列,默认x为主轴
		2: 父级元素为弹性盒,子元素都能设置宽高
		3: 父元素为弹性盒,让子元素在弹性盒中上下左右居中,只需要设置margin:auto;
			
	设置display:flex / inline-flex;对子元素的影响
		子元素的float 和 clear 无效
		vertical-align(元素垂直对齐方式)无效
			
	容器(父元素)
		属性:
			flex-direction:;设置主轴
				row		水平方向主轴
				row-reverse	水平反向主轴
				column	垂直主轴
				column-reverse	垂直反向主轴
				
			flex-wrap:;子元素是否换行
				nowrap	不换行
				wrap	换行
				wrap-reverse 反向换行
				
			flex-flow:;设置主轴  是否换行
			
			justify-content:;子元素在主轴上的对齐方式
				flex-start	起始位置
				flex-end	终点位置
				center 		居中
				space-around	完全自动分配
				space-between	两端对齐,中间自动分配
				
			align-items:;子元素在侧轴上的对齐方式
				flex-start	起始位置
				flex-end	终点位置
				center 		居中
				baseline	基线对齐
				stretch		默认位置对齐
				
			align-content:;多行元素在侧轴上的对齐方式,多行元素才有效
				flex-start	起始位置
				flex-end	终点位置
				center 		居中
				space-around	完全自动分配
				space-between	两端对齐,中间自动分配
				stretch		默认位置对齐
								
	项目(子元素)
		属性: 
		align-self:;子元素在侧轴上的对齐方式
			flex-start	起始位置
			flex-end	终点位置
			center		居中
			stretch		拉伸(此元素不设置宽度或者高度)
			
			auto		默认值  子元素跟随父元素 align-items的值
				注意:如果父元素有此属性设置,则继承alig-items:;属性设置
		    stretch	 子元素被拉伸

			
		order:;数值越大,子元素越靠后