弹性盒模型案例讲解

弹性盒模型的设置的方法为display:box 或display:inline-box
box-orient 为定义盒模型的布局方向,由于盒模型的只有在webkit或moz的内核才生效，故我们在使用这个属性之前要在它前面加上-webkit-或-moz-
box-orient的属性值有horizontal(水平)，vertical（垂直）
下方代码是块状元素水平排列的，大家可以自己尝试一下改为垂直排列

    
        
        
        
    
    
        

            
1
            
2
            
3
            
4
            
5
        
        
    
 

css3_box1.png

box-direction 为元素的排列顺序，属性值normal表示正序，reverse表示反序

css3_box2.png

box-ordinal-group 设置元素的具体位置

css3_box2.png

box-flex 定义盒子的弹性空间
子元素的尺寸=盒子的尺寸*子元素的box-flex属性值 / 所有子元素的box-flex属性值的和

css3_box3.png

css3_box4.png

box-pack 对盒子富裕的空间进行管理
start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间平均分布
以下案例只展示center和justify,其余请自行尝试

css3_box5.png

css3_box6.png

box-align 在垂直方向上对元素的位置进行管理
start 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中

css3_box7.png

让div盒子水平垂直居中

css3_box8.png

以上就是我要讲的弹性盒模型，谢谢大家的阅读！