CSS3 伸缩布局盒模型记CSS3 伸缩布局盒模型CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度，高度，以最佳方式填充可用空间。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。更重要的是，Flexbox布局方向不可预知，不像常规的布局(块级从上到下，内联从左到右)，而那些常规的适合页面布局，但对于支持大型或者复杂的应用程序就缺乏灵活性。如果常规布局是基于块和内联文本流方向，那么Flex布局就是基于“Flex-flow”方向。先来了解一下伸缩盒模型的一些专用术语。
主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。主轴起点，主轴终点：Flex项目的配置从容器的主轴起点边开始，往主轴终点边结束。主轴长度：Flex项目在主轴方向的宽度或高度就是项目的主轴长度，Flex项目的主轴长度属性是width或height属性，由哪一个对着主轴方向决定。侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。侧轴起点，侧轴终点：伸缩行的配置从容器的侧轴起点边开始，往侧轴终点边结束。侧轴长度：Flex项目在侧轴方向的宽度或高度就是项目的侧轴长度，Flex项目的侧轴长度属性是widht或height属性，由哪一个对着主轴方向决定。
Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多。Flexbox布局语法规范主要分成三种。
旧版本，2009年版本，是最早的伸缩布局，各大主流浏览器对其支持性略有不同，可惜的是，对Flexbox布局的各属性支持也不完全，在使用时还需添加各浏览器的前缀。混合版本，2011年版本，只有IE10支持。最新版本,2012年版本,除了Safari浏览器不支持外，其他最新浏览器都支持这个版本。
Flex容器属性display要改变元素的模式为伸缩容器，需要使用display属性。
display:flex | inline-flex
flex:设置为块级伸缩容器。inline-flex:设置为内联级伸缩容器。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } div>div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } #box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flex; display:flex; border:1px solid; margin:20px; } #inline{ display:-moz-inline-box; display:-webkit-inline-box; display:-ms-inline-flexbox; display:-webkit-inline-flexbox; display:inline-flex; border:1px solid; margin:20px; }</style></head><body><div id="box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div id="inline"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div></body></html>
块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。
flex-direction定义Flex项目在Flex容器中放置的方向。
flex-direction:row | row-reverse | column | column-reverse
row:默认值，如果书写方式是ltr，那么Flex项目从左向右排列；如果书写方式是rtl，那么Flex项目从右向左排列。row-reverse:如果书写方式是ltr，那么Flex项目从右向左排列；如果书写方式是rtl，那么Flex项目从左向右排列。column:和row类似，方向从上到下排列。column-reverse:和row-reverse类似，方向从下到上排列。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } div>div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } .box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flexbox; display:flex; border:1px solid; margin:20px; } .box1{ /*定义Flex项目在Flex容器中放置的方向,从左往右。*/ -moz-box-orient:block-axis; -moz-box-direction:normal; -webkit-box-orient:block-axis; -webkit-box-direction:normal; flex-direction:row; } .box2{ /*定义Flex项目在Flex容器中放置的方向，从右往左。*/ -moz-box-orient:block-axis; -moz-box-direction:reverse; -webkit-box-orient:block-axis; -webkit-box-direction:reverse; flex-direction:row-reverse; } .box3{ /*定义Flex项目在Flex容器中放置的方向，从上往下。*/ -moz-box-orient:inline-axis; -moz-box-direction:normal; -webkit-box-orient:inline-axis; -webkit-box-direction:normal; flex-direction:column; } .box4{ /*定义Flex项目在Flex容器中放置的方向，从下往上。*/ -moz-box-orient:inline-axis; -moz-box-direction:reverse; -webkit-box-orient:inline-axis; -webkit-box-direction:reverse; flex-direction:column-reverse; }</style></head><body><div class="box box1"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box2"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box3"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div><div class="box box4"> <div>A</div> <div>B</div> <div>C</div> <div>D</div></div> </body></html>
默认值flex-direction等于row时，Flex项目从左往右排列。
flex-direction等于row-reverse时，Flex项目从右往左排列。
flex-direction等于column时，Flex项目从上往下排列。
flex-direction等于column-reverse时，Flex项目从下往上排列。
flex-wrap默认情况下，Flex项目都尽可能在一行显示，你可以根据flex-wrap的属性值来改变，让Flex项目多行显示。
flex-wrap:nowrap | wrap | wrap-reverse
nowrap:默认值，单行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。wrap:多行显示，如果书写方式是ltr，Flex项目从左往右排列；如果书写方式是trl，Flex项目从右往左排列。wrap-reverse:多行显示，如果书写方式是ltr，Flex项目从右往左排列；如果书写方式是trl，Flex项目从左往右排列。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> *{ margin:0; padding:0; } .box{ display:-moz-box; display:-webkit-box; display:-ms-flexbox; display:-webkit-flexbox; display:flex; border:1px solid; margin:20px; -moz-box-lines:multiple; /*定义伸缩换行属性为nowrap(默认值)*/ flex-wrap:nowrap; } .box div{ width:100px; height:100px; line-height:100px; border:1px solid; text-align:center; margin:10px; } </style></head><body><div class="box"> <div>A</div> <div>B</div> <div>C</div> <div>D</div> <div>E</div> <div>F</div> <div>G</div> <div>H</div> <div>I</div> <div>J</div> <div>K</div> <div>L</div></div> </body></html>