css今日学习：弹性盒子

弹性盒子（flex）
描述：通过两个轴控制容器内的项目,默认x轴为主轴，y轴为副轴
常用属性：
在容器上的属性
flex-direction
控制主轴方向：默认x轴是主轴
属性：
column 纵向，上到下
column-reverse 反纵向，下到上
row 横向，左到右
row-reverse 反横向，右到左

flex-wrap
控制超出的项目进行换行。
属性：
nowrap 不换行，项目会等比缩放在一行
wrap 换行，按容器的副轴的宽度等分
wrap-reverse 反wrap换行

flex-flow，复合属性
flex-direction，flex-wrap

justify-content
控制项目在容器主轴上的排列方式
属性：
flex-start 左对齐
flex-end 右对齐
space-between 两端居左居右，中间等间距
space-around 等间距分布

algin-item
控制项目在副轴上的分布
属性：
flex-start 置顶/左对齐
flex-end 置底/右对齐
center 居中
baseline 与基线对其
strect 置底+置高

algin-content
控制多个副轴的在容器副轴上的排列顺序
属性：
flex-start
flex-end
conter
flex-direction
flex-around
stretch

在项目上的属性
order
控制该项目在全部项目中的位置

algin-self
控制单个项目在容器副轴上的位置

lex-grow
分配剩余的空间，默认是0

flex-shrint
当项目总长度大于容器长度时，对项目进行缩放，原定宽度不起作用，默认值为1

flex-basis
控制项目宽度，占容器的多少，px

flex复合属性
flex-grow，flex-shrint，flex-basis