flex布局的注意事项

flex布局原理

（flex布局意思为弹性布局用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局）
父元素叫flex父容器
子容器叫flex项目
子容器可以横向排列，也可以纵向排列

1.当我们为父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将失效。
2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

flex父项属性

1.flex-direction:设置主轴的方向
  **  属性值：**
  	row 默认从左到右（x轴方向）
  	row-reverse 从右到左
  	column 从上到下（y轴）
  	column-reverse 从下到上
  	
	默认的是x轴（row）y轴就是侧轴，我们的元素时根据主轴来排列的
	
2.justify-content:设置主轴上的子元素的排列方式（要确定主轴是哪个）
	**属性值**
		flex-start 默认值从头开始，如果主轴是x轴，则从左到右
		flex-end 从尾部开始排列
		center  在主轴居中对齐（如果主轴是x轴则水平居中）
		space-around 平分剩余空间
		space-between 先两边贴边，在平分剩余空间（重要）
		
3.flex-wrap:设置子元素是否换行
	默认情况下，项目都是在一条线上的，不会换行，除非设置这个属性，装不下会缩小子元素的宽度。
	**属性**
		nowrap 不换行
		wrap 换行
		
4.align-content:设置侧轴上的子元素的排列方式（多行）
	只能用于子项 换行 的情况（多行），在单行下是没有效果的
	**属性**
			flex-start 默认在侧轴的头部开始排序
			flex-end 在侧轴的尾部开始排序
			center 在侧轴中间显示
			space-around 子项在侧轴平分剩余空间
			space-between 子项在侧轴先分布在两头，在平分剩余空间
			stretch 设置子项元素告诉平分元素高度
		
5.align-items:设置侧轴上的子元素排列方式（单行）
	侧轴是相对的，主轴以外的就是侧轴
	**属性**
		flex-start 默认从上到下
		flex-end 从下到上
		center 挤在一起居中（侧轴垂直居中）
		streth 拉伸  （但是子盒子不能给高度，会拉的和父容器一样高）
		
		实现水平居中和垂直居中可以设置两个属性：
		justify-content:center;主轴居中对齐
		align-items:center； 侧轴居中对齐
		
6.flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
	**属性**
		flex-flow:row wrap 

flex布局子项常见属性

1.flex子项目占的份数
	flex属性定义子项目分配剩余空间，用flex来表示占多少份数	
2.align-self控制子项目自己在侧轴的排列方式
	align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
	默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
	就是单独给自己在侧轴上设置排列方式
3.order属性定义子项的排列顺序（前后顺序）
	数值越小，排列越靠前，默认为0
	和z-index不一样
	要设置的元素设置order：-1 (这个值随便写，默认是0，根据自己的需要写数值)