flex

flex布局原理

通过给父元素添加flex属性，来控制子元素的位置和排列

常见父元素属性

flex-direction

设置主轴方向，默认x

操作	代码
默认	flex-direction:row
反转	flex-direction:row-reverse
竖直	flex-direction:column
竖直反转	flex-direction:column-reverse

justify-content

设置主轴上子元素的排列方式

操作	代码
默认	justify-content:flex-start
贴右	justify-content:flex-end
居中	justify-content:center
均分	justify-content:space-around
贴边均分	justify-content:space-between

flex-wrap

设置子元素是否换行

操作	代码
默认不换行	flex-wrap:nowrap
换行	flex-wrap:wrap

align-content

侧轴上子元素的排列方式（多行）
对单行无效

操作	代码
默认	align-content:flex-start
贴下	align-content:flex-end
居中	align-content:center
上下均分	align-content:space-around
上下贴边	align-content:space-between

align-items

侧轴上子元素的排列方式（单行）默认为y

操作	代码
默认	align-items:flex-start
贴下	align-items:flex-end
居中	align-items:center
拉伸,子盒子不要有高度	align-items:stretch

flex-flow

flex-direction和flex-wrap的复合属性

操作	代码
主轴列，换行	flex-flow:column wrap

常见子元素属性

flex

子元素分配剩余空间，占多少份

flex:1
flex:20% //多用于换行

align-self

控制子项在侧轴的排列方式

自己下来 align-self:flex-end;

order

定义项目的排列顺序

order:-1