CSS box-flex属性

box-flex属性（和谐版）

#father { display: box; }

#first_boy { box-flex: 2; }
#second_boy{ box-flex: 1; }
#three_boy { box-flex: 1; }

CSS box-flex属性（不和谐版）

#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy {  50px; }

box-orient, box-direction, box-align, box-pack用法

box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：

horizontal | vertical | inline-axis | block-axis | inherit

box-direction

box-direction是用来确定子元素的排列顺序，可选值有：

normal | reverse | inherit 

box-align

box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”，

start | end | center | baseline | stretch

box-pack

box-pack决定了父标签水平遗留空间的使用，其可选值有：

start | end | center | justify