弹性盒儿模型

Flexbox: 布局模型。

弹性盒儿模型是将一个父级盒内的空间分配给子元素，而子元素会根据所得的空间比例占用所得到的空间。其子元素和根据父集盒的空间大小而自适应

（Web 应用的样式设计中，布局是非常重要的一部分。布局用来确定页面上不同组件和元素的尺寸和位置。随着响应式用户界面的流行，Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率。响应式用户界面设计中最重要的一环就是布局。需要根据窗口尺寸来调整布局，从而改变组件的尺寸和位置，以达到最佳的显示效果。）

主轴确定了容器中每一行上条目的排列方向，而交叉轴则确定行本身的排列方向

   其中的li元素水平布局，其会根据窗口的大小而换行

#box{

list-style: none;
display: flex; //为父集盒指定flex布局
flex-direction: row;
flex-wrap: wrap-reverse;

}

flex-warp:nowrap | warp | warp-reverse;

nowarp:默认当窗口变化时，内容不变化；

warp:内容根据窗口变化而变化（当父集盒剩下的空间不够承载一个li时，li会向下换行）

warp-reverse:内容根据窗口变化而变化（当父集盒剩下的空间不够承载一个li时，li会向上换行）

flex-direction:row|row-reverse|column|column-reverse;

row:水平布局，由第一个li开始水平布局。

rew-reverse：水平布局，由最后一个li开始水平布局

column:垂直布局，由第一个li开始垂直布局

column-reverse:垂直布局，由最后一个li开始垂直布局

/*.flex-item:last-child { order: -1; // 最后一个li在其他li前面 }

（"order"属性的主要作用是兼顾页面的样式和可访问性。支持可访问性的设备，如屏幕阅读器，都是按照 HTML 中代码的顺序来读取元素的。这就要求一些相对重要的文本出现在 HTML 标记的前面。而对于使用浏览器的一般用户来说，在某些情况下把一些相对不重要的图片显示在前面是更好的选择。比如在一个商品的展示页面中，在源代码中把商品描述的文本放在商品图片之前。这样可以方便屏幕阅读器的读取；而在 CSS 中使用"order"属性把图片放在文本的前面。这样可以让用户首先看到图片。）*/

条目尺寸的弹性: flex-basis | flex-grow | flew-shrink

flex-basis:初始的尺寸，条目未被调整前的尺寸（如果"flex-basis"的值为 auto，则实际使用的值是主轴尺寸属性的值，即 width 或 height 属性的值。如果主轴尺寸属性的值也是 auto，则使用的值由条目内容的尺寸来确定）；

flex-grow:当容器有多余的空间时，这些空间在不同条目之间的分配比例。比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3，那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占全部空间的 1/6、1/3 和 1/2。

flew-shrink：当容器的空间不足时，各个条目的尺寸缩小的比例。在进行尺寸缩小时，条目的缩小比例与"flex-basis"的值相乘之后，就得到了应该缩小的尺寸的实际值。例如，在容器中有 3 个条目，其"flex-shrink"属性的值分别为 1，2 和 3。每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时，比如变成了 540px 之后， 则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。3 个条目分别要缩小 10px、20px 和 30px，主轴尺寸分别变为 190px、180px 和 170px。

 

转自:http://www.ibm.com/developerworks/cn/web/1409_chengfu_css3flexbox/#ibm-pcon