flex模型

一、box-sizing

box-sizing:

content-box: 正常，即padding和border都会扩大盒子宽高

border-box: 在当前的盒子模型内，往内部修改

 

二、calc计算

calc(100px-20px)   x错的

calc(100px - 20px)  对的

 

三、弹性布局

postCss  webkit

若父级用了display：flex，则会水平布局

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

        center: 居中

        space-between： 两端对齐

        space-around： 子元素拉手分布

        flex-start: 居左

        flex-end: 居右

align-items: 子元素的垂直排列

        center: 居中

        flex-start: 居左

        flex-end: 居右

align-content: 多行的垂直排列

        center: 居中

        flex-start: 居左

        flex-end: 居右

flex-direction：元素排列方向

        row: 横向排列（默认）

        row-reverse: 横向翻转

        column: 纵向排列

        column-reverse: 纵向翻转

flex-wrap：子元素是否在一行显示

        nowrap:  不换行

        nowrap:  换行

flex-flow: <flex-direction> <flex-wrap>

 

子级的属性

flex: 1  系数，即将div分成n份

子元素在划分父元素宽度时，会先去掉固定宽度

flex-grow: 1； 定义子元素的放大比例

align-self: flex-start 用于覆盖父级的align-items垂直排列

order：0 规定子元素顺序， 越小越靠前