CSS3 弹性盒模型

弹性盒模型

flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

box-flex属性, 指定box的子元素是否灵活或固定的大小。

参考代码：

// 父节点，可以任意分配子元素的空间
.test_box {
    display: -moz-box; 
    display: -webkit-box; 
    display: box; 

    ...
}

.list {
   ...
}

.list_one {
    -moz-box-flex: 1; 
    -webkit-box-flex: 1; 
    box-flex: 1;
}

.list_two{
    -moz-box-flex: 2; 
    -webkit-box-flex: 2; 
    box-flex: 2;
}

【注意】 当子元素中有宽度值的时候，此元素就定宽处理，剩下的空间再按比例分配。

有一次就是忘记设了宽度了，结果怎么调都没有用，原来子元素已经设置了宽度。

父节点中的属性配置

弹性盒子模型下（父标签）其实是很有决定作用的：box-orient, box-direction, box-align, box-pack, box-lines. 能够决定子元素的方向

box-orient

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

horizontal | vertical | inline-axis | block-axis | inherit
其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。

box-direction

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

normal | reverse | inherit
其中normal是默认值，表示按照正常顺序排列。所谓正常顺序，就是我们看书写文字的顺序，从左往右，由上至下，先出现的元素，就上面或是左边。而reverse表示反转，原本从左往右应该是1-2-3的，结果显示确实3-2-1。

box-align

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

box-align

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

box-pack

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

start | end | center | justify

就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因为box-direction属性，这玩意可以反转原本的排列，原本的“左对齐”反转后结果是“右对齐”了，此时”left”显然就词不达意了，所以使用”start”更具有概括性，就是与父标签的起始位置对齐，从而不会产生语义与行为上的困扰。

参考资料

CSS box-flex属性，然后弹性盒子模型简介
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/

Flex 布局教程：语法篇
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html