css3伸缩布局属性总结

http://www.css88.com/book/css/properties/flex/flex-basis.htm

http://c7sky.com/dive-into-flexbox.html

http://www.css88.com/archives/5741

http://caibaojian.com/demo/flexbox/align-items.html

http://caibaojian.com/demo/flexbox/align-content.html

一共2个标准一个是dispaly:box ;老的，另一个是dispaly:flex
用在父容器上的值：

div{

display: -webkit-box;

display: -moz-box;

display: -o-box;

display: -ms-flexbox;

display: -webkit-flex;

display: -moz-flex;

display: -ms-flex;

display: -o-flex;

display: flex;

-webkit-flex-wrap:wrap;
flex-direction:wrap;

align-content:flex-start;

-webkit-box-pack:end;-moz-box-pack:end;-ms-box-pack:end;

-webkit-box-align:stretch;-moz-box-align:stretch;-ms-box-align:stretch

-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical

}

align-content 属性在当灵活容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。

提示：使用 justify-content 属性对齐主轴上的各项（水平）。

justify-content:在子元素不是flex的时候起作用，可以单行

align-content 会更改 flex-wrap 的行为。他只能多行使用，它和 align-items 相似，但是不是对齐伸缩项目，它对齐的是伸缩行。可能你已经想到了，它接受的值也很相似：

当伸缩容器的侧轴还有多余空间时，本属性可以用来调准「伸缩行」在伸缩容器里的对齐方式，这与调准伸缩项目在主轴上对齐方式的 <' justify-content '> 属性类似。请注意本属性在只有一行的伸缩容器上没有效果。

对应的脚本特性为alignContent。

用在子容器上的值： box-flex flex-grow flex-shrink flex-basis order

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: flex-end;
    -ms-flex-line-pack: end;
    align-content: flex-end;
    -webkit-align-items: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    background: #000;
    height:200px;
}
.flex-item{background: #fe6;margin:2px; padding:5px}

.flex-item:nth-child(1) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(2) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(3) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
    }

.flex-item:nth-child(4) {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align

Flexbox 规范时间表：

2009年7月工作草案 (display: box;)
2011年3月工作草案 (display: flexbox;)
2011年11月工作草案 (display: flexbox;)
2012年3月工作草案 (display: flexbox;)
2012年6月工作草案 (display: flex;)
2012年9月候选推荐 (display: flex;)

浏览器商为了自救，搞了个私有前缀，因此定义一个伸缩盒特别麻烦：

因此我在定下第2个规范，CSS统一用less来写。less是一种动态的样式表语言，它为CSS增加变量，组合，函数，运算等语法，让CSS更便于编写，复用与维护。有了less，上面那一坨东西可以封装成一个函数，用不着每次都写这么多让你狂抓的候选值。

.flexbox() {//定义

// 2009 spec