Flex布局

Flex布局

布局原理

通过给父盒子添加flex属性(display: flex)，来控制子盒子的位置和排列方式。 默认情况下，项目都排在一条线上。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器和项目

Flex布局适用于任何元素，采用flex布局的元素被称为flex容器，它的所有子元素自动成为容器成员，成为flex项目，简称项目。 
​flex布局中默认的子元素不换行。如果装不开，就会缩小子元素宽度。除图片 

容器常见属性

flex-direction:设置主轴的方向 主轴默认x方向 侧轴y方向 
​	row 默认从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到上
jusetify-content:设置主轴上子元素的排列方式 
	flex-start 默认值 从头部开始 如果主轴是x，则从左到右 
	flex-end 从尾部开始排列，右对齐
	center 在主轴居中对齐（如果主轴是x，则水平居中） 
	space-around 平分剩余空间 分配空间包含margin-left和margin-right 
	space-between 先两边贴边 在平分剩余空间 ☆ 
	space-evenly 分配剩余空间,项目间和容器距离一样
flex-wrap：设置子元素是否换行 
	nowrap 默认值 不换行 wrap 换行 wrap-reverse 换行且第一行在下方只设置flew-wrap,没设置侧轴对齐方式。项目高度会平分容器高度
	align-items：设置侧轴上的子元素的排列方式(单行)
	flex-start 默认值 从上到下 
	flex-end 从下到上
	center 挤在一起居中(垂直居中) 
	stretch 拉伸 (子盒子不要给高度) 将高度拉伸到和父元素一样高 默认值。                                                         
	​baseline 文本基线对齐（最大文本的基线）
align-content：设置侧轴上的子元素的排列方式(多行) 设置此项只能在设置换行的情况下使用，在单行是没有效果的。
	flex-start 默认值 在侧轴的头部开始排列
	flex-end 在侧轴的尾部开始排列
	center 在侧轴中间显示
	space-around 子项在侧轴平分剩余空间
	space-between 子项在侧轴先分布在两头，在平分剩余空间 
	stretch 设置子项元素高度平分父元素高度
flex-flow：复合属性，相当于同时设置了fiex-direction和flex-wrap flex-flow:row wrap; x主轴，开始换行 

项目常用属性

flex 定义子项分配剩余空间，用flex来表示占用多少分数。默认为0。将自身的尺寸清0,在按照剩余空间分配。
flex-gorw 直接按照项目分配后的剩余空间分配放大。
​align-self 控制子项自己在侧轴的排列方式，允许单个项目与其他项目不一样的排列方式，可覆盖align-items属性。 默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 
order 定义项目的排列顺序 数值越小，排列越靠前。默认为0
flex-shrink 默认为1 设置为0时 该项目不缩小，其他项目缩小，所有项目占满整个容器

​