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

   display: -webkit-box;

   display: -moz-box;

   display: -o-box;

   // tweener

   display: -ms-flexbox;

   // new spec

   display: -webkit-flex;

   display: -moz-flex;

   display: -ms-flex;

   display: -o-flex;

   display: flex;

 }

 div{

    .flexbox();//使用

 }

我已经把与伸缩盒相关的东西都封装为一个less库，大家可以到这里下

// display: flex

.flexbox() {
  // 2009 spec
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;

  // tweener
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -o-flexbox;

  // new spec
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}

// flex //
.flex(@flex) {
  -webkit-box-flex: @flex;
  -moz-box-flex: @flex;
  -o-box-flex: @flex;
  box-flex: @flex;
  -webkit-flex: @flex;
  -moz-flex: @flex;
  -ms-flex: @flex;
  -o-flex: @flex;
  flex: @flex;
}
@flexvalue: 1 1 auto;
// flex-derection = box-orient + box-direction
.flex-direction(@direction) when (@direction = row) {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
.flex-direction(@direction) when (@direction = row-reverse) {
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}
.flex-direction(@direction) when (@direction = column) {
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-direction(@direction) when (@direction = column-reverse) {

//http://www.w3school.com.cn/cssref/pr_box-orient.asp
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-box-direction: reverse;
  -moz-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
.flex-direction(@direction) {
  -webkit-flex-direction: @direction;
  -moz-flex-direction: @direction;
  -ms-flex-direction: @direction;
  -o-flex-direction: @direction;
  flex-direction: @direction;
}

// order //
.order(@order) {
  -webkit-box-ordinal-group: @order + 1;
  -moz-box-ordinal-group: @order + 1;
  -o-box-ordinal-group: @order + 1;
  -webkit-order: @order;
  -moz-order: @order;
  -ms-order: @order;
  -o-order: @order;
  order: @order;
}


//justify content//

//2009 property is box-pack
//2009 property does not support a method for space-around

//start
//end
//center
//justify

.justify-content(@justify-method) when (@justify-method = flex-start) {
-webkit-box-pack: start;
-moz-box-pack: start;
-ms-flex-pack: start;
-o-box-pack: start;
box-pack: start;
justify-content: flex-start;
}

.justify-content(@justify-method) when (@justify-method = flex-end) {
-webkit-box-pack: end;
-moz-box-pack: end;
-ms-flex-pack: end;
-o-box-pack: end;
box-pack: end;
justify-content: flex-end;
}

.justify-content(@justify-method) when (@justify-method = center) {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center; 
    -o-box-pack: center;
    box-pack: center;
    justify-content: center;
}



.justify-content(@justify-method) when (@justify-method = space-between) {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -o-box-pack: justify;
    box-pack: justify;
    justify-content: space-between;
}
// note there is no fallback 2009 spec support for space-around
.justify-content(@justify-method) when (@justify-method = space-around) {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: distribute;
    -o-box-pack: justify;
    box-pack: justify;
    justify-content: space-around;
}

// 2011 spec

// flex-start (default): items are packed toward the start line
// flex-end: items are packed toward to end line
// center: items are centered along the line
// space-between: items are evenly distributed in the line; first item is on the start line, last item on the end line
// space-around: items are evenly distributed in the line with equal space around them

.justify-content(@justify-method) {
    -webkit-justify-content: @justify-method;
    -moz-justify-content: @justify-method;
    -ms-justify-content: @justify-method;
    -o-justify-content: @justify-method;
    justify-content: @justify-method;
}

.align-items(@align-method) when (@align-method = flex-start ){
    -moz-box-align: start ;//https://developer.mozilla.org/en-US/docs/Web/CSS/box-align
    -webkit-box-align: start ;
    -ms-flex-align: start;//http://realworldvalidator.com/css/module/Microsoft/-ms-flex-align
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.align-items(@align-method) when (@align-method = flex-end ){
    -moz-box-align:  end;
    -webkit-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.align-items(@align-method) when (@align-method = center ){
    -moz-box-align:  center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.align-items(@align-method) when (@align-method = baseline ){
    -moz-box-align:  baseline;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    -webkit-align-items: baseline;
    align-items: baseline;
} 
.align-items(@align-method) when (@align-method = stretch ){
    -moz-box-align:  stretch;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
}
.align-items(@align-method){
   -moz-box-align:  @align-method;
   -webkit-box-align: @align-method;
   -ms-flex-align: @align-method;
   -webkit-align-items: @align-method;
   align-items: @align-method;
}
.flex-wrap(@wrap-method) when(@wrap-method = nowrap){
   -ms-flex-wrap:none;
   -moz-flex-wrap:nowrap;
   -webkit-flex-wrap: nowrap;
   flex-wrap: nowrap;
} 
.flex-wrap(@wrap-method) when(@wrap-method = wrap){
   -ms-flex-wrap:wrap;
   -moz-flex-wrap:wrap;
   -webkit-flex-wrap: wrap;
   flex-wrap: wrap;
}
.flex-wrap(@wrap-method) when(@wrap-method = wrap-reverse){
   -ms-flex-wrap:wrap-reverse;
   -moz-flex-wrap:wrap-reverse;
   -webkit-flex-wrap: wrap-reverse;
   flex-wrap: wrap-reverse;
}
.flex-wrap(@wrap-method){
   -ms-flex-wrap:@wrap-method;
   -moz-flex-wrap:@wrap-method;
   -webkit-flex-wrap:@wrap-method;
   flex-wrap:@wrap-method;
}
.align-self(@value) when(@value = flex-start){
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
}
.align-self(@value) when(@value = flex-end){
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
}
.align-self(@value) when(@value = center){
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}
.align-self(@value) when(@value = baseline){
    -webkit-align-self: baseline;
    -ms-flex-item-align: baseline;
    align-self: baseline;
}
.align-self(@value) when(@value = stretch){
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
}
.align-self(@value){
    -webkit-align-self:@value;
    -ms-flex-item-align:@value;
    lign-self:@value
}

//===========================================================
//  http://stackoverflow.com/questions/15662578/flexible-box-model-display-flex-box-flexbox by RubyLouvre
.user-select(){
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
.fixed-width(@value){
    width:@value;
    min-width:@value;
    max-width:@value;
}
.fixed-height(@value){
    height:@value;
    min-height:@value;
    max-height:@value;
}
.box-sizing(@value){
   -webkit-box-sizing: @value; /* Safari/Chrome, other WebKit */
   -moz-box-sizing:@value;    /* Firefox, other Gecko */
   box-sizing: @value;         /* Opera/IE 8+ */
}
.brimming(){
      width: 100%;
      height: 100%;
}
.transform(@value){
       transform:@value;
       -moz-transform:@value;
       -webkit-transform:@value;
       -ms-transform:@value;
}
.box-shadow(@value){
        -webkit-box-shadow: @value;
        -moz-box-shadow: @value;
        -ms-box-shadow:@value;
        box-shadow:@value;
}
//=========================================================