1、弹性盒模型用于决定元素在盒子里的分布方式以及如何处理盒子的可用空间。通过盒模型，设计师可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体的弹性布局
2注意在使用弹性盒模型的时候 父元素必须要加
Ødisplay:box
或 display:inline-box
3box-orient 定义盒模型的布局方向
Øhorizontal
水平显示
Øvertical
垂直方向
4box-direction 元素排列顺序-webkit-direction(chrome、opera、safari) –moz-direction(firefox)
Ønormal
正序
Øreverse
反序
5box-ordinal-group 设置元素的具体位置
6box-flex 定义盒子的弹性空间
Ø子元素的尺寸=盒子的尺寸*子元素的box-flex属性值
/ 所有子元素的box-flex属性值的和
7box-pack 对盒子富裕的空间进行管理
Østart
所有子元素在盒子左侧显示，富裕空间在右侧
Øend
所有子元素在盒子右侧显示，富裕空间在左侧
Øcenter
所有子元素居中
Øjustify
富余空间在子元素之间平均分布
8box-align 在垂直方向上对元素的位置进行管理
Østar
所有子元素在据顶
Øend
所有子元素在据底
Øcenter
所有子元素居中
lbox-sizing 盒模型解析模式
Øcontent-box标准盒模型
Øwidth(所占空间)=margin+border+padding+wid(所设width)
Øborder-box
怪异盒模型
ØWidth（所占空间）=margin+wid（所设width这个width包含border和padding的空间)
lresize自由缩放
lnone禁止缩放
ØBoth水平垂直都可以缩放
ØHorizontal只有水平方向可以缩放
ØVertical只有垂直方向可以缩放
Ø注意：一定要配合overflow:auto一块使用只有水平方向可以缩放
lcolumn-width
栏目宽度px
lcolumn-count
栏目列数num
lcolumn-gap栏目距离px
lcolumn-rule栏目间隔线pxstyle color
l只支持WebKit内核
网友评论