css3 box-flex属性（弹性盒子）学习笔记

弹性盒子是 CSS3 的一种新的布局模式。

当页面需要适应不同的屏幕大小以及设备类型时，使用弹性盒子布局模式可以确保元素拥有恰当的行为。

使用场景1

将一个div划分成多份，每一份占有某比例的宽度，无论在任何大小的设备屏幕上，此比例都保持不变。
代码：

    
        
        
    
    
        

            
1
            
2
            
3
        
    

首先父元素必须添加必要的声明：display:box或者display:inline-box；
三个并列的子元素每一个都声明了box-flex: 1;，这说明每一个子div都将占据父div的三分之一容量。
结果：

image.png

使用场景2

将一个div划分成多份，其中有一份的宽度是固定的，除定宽的这份之外其他的每一份占有余下容量的某比例的宽度，无论在任何大小的设备屏幕上，此比例都保持不变。
代码：

    
        
        
    
    
        

            
1
            
2
            
3
        
    

结果：

image.png

如图所示，第一个子div——child_box_one固定占有30px的宽度，剩下两个子div按2:1的比例分配父div宽度减掉30px后剩下的容量。

margin和padding的影响

如果某一个子div增加了magin/padding的属性，应该是先用可分配宽度减去margin/padding的宽度，剩下的宽度再按相应的比例分配给不同的子div。
代码：

    
        
        
    
    
        

            
1
            
2
            
3
        
    

结果：

image.png

可以看到，定宽的红色div宽度不变，虽然我们只给蓝色div加了margin，但事实上蓝色div和黄色div的分配到的宽度都减少了。

父标签的可选属性:box-orient

box-orient用来确定子元素的方向，是横着排还是竖着走。可选的值有：
horizontal | vertical | inline-axis | block-axis | inherit
例如：

    
        
        
    
    
        

            
1
            
2
            
3
        
    

结果：

image.png

父div中设置box-orient:vertical;子div就变成纵向排列了。

父标签的可选属性:box-align

直接看代码吧：
box-align属性设置为top时：

    
        
        
    
    
        

            
1
            
2
            
3
        
    

结果：

image.png

可以看到三个子div是顶部对齐的。

box-align属性设置为center时：

    
        
        
    
    
        

            
1
            
2
            
3
        
    

结果：

image.png

可以看到，三个子div是居中对齐的。

父标签的可选属性:box-pack

box-align控制了子div垂直方向上的对齐方式，box-pack则控制了子div水平方向上的对齐方式，可选值有：start | end | center | justify。
例如：justify属性值控制子div两端对齐：

    
        
        
    
    
        

            
hahahaha1
            
hahahaha2
            
hahahaha3
        
    

结果：

image.png

若将属性值改为end，效果则是：

image.png

参考文章：http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/