flex弹性盒子

 盒子模型   box-sizing:

　　content-box  平时普通盒子模型 ：padding、border 盒子会变大 （向外扩展）

　　border-box   盒子模型   ：padding、border 盒子不会变大     （向内扩展） 

calc(公式)   注意: + - * /　　　　属性兼容查询  https://www.caniuse.com

　　　　calc(100px-20px) ×
　　　　calc(100px - 20px) √

父级属性： display:flex

　　　　justify-content: 子元素水平排列方式

　　 　　　　center　　　　居中

　　　　　　 space-between 　　　　两端对齐

　　　　　　 space-around　　　　子元素拉手分布

　　　　　　 flex-start 　　　　居左

　　　　　　 flex-end　　　　居右

　　　　align-items： 单行子元素垂直排列

　　　　align-content： 多行子元素垂直排列

　　　　　　center:居中

　　　　　　flex-end：底部

　　　　　　flex-start：开始　　　　

　　　　flex-direction：

　　　　　　row：横向排列

　　　　　　row-reverse：横向翻过排列

　　　　　　column:纵向排列

　　　　　　column-reverse：纵向翻过排列

　　

　　　　 flex-wrap:nowrap（默认 不换行） | wrap（换行，第一行在上方） | wrap-reverse（wrap-reverse：换行，第一行在下方）;   

　　　　flex-flow：<flex-direction><flex-wrap>

 

 子级属性：

　　　　flex：1   1指比例  先去除固定宽度

　　　　align-self： 用来覆盖父级 align-items 垂直排列

　　　　flex-grow：1 定义子元素放大比例

　　　　order：规定子元素顺序排列  数值越小，越靠前，默认值为0