Flex弹性布局

---

父元素

.box{ 
    display:flex;  
    display:-webkit-flex;
}
.boxInline{ 
    display:inline-flex；  
    display:-webkit-inline-flex;
}

主轴对齐 justify-content

flex-start 、flex-end、center、space-between、space-around

justify-content : center; 

交叉轴对齐 align-items

flex-start、flex-end、center、baseline、stretch

align-items: center;

多轴对齐 align-content

flex-start、flex-end、center、space-between、space-around、stretch

align-content: center;

排列方向 flex-direction

row、row-reverse、column、column-reverse;

flex-direction : column;

超过容器，折行 flex-wrap

nowrap、wrap、wrap-reverse;

flex-wrap : wrap;

缩写direction/wrap

flex-flow : flex-dirction || flex-wrap

---

子元素

初始尺寸 flex-basis

flex-basis: 100;  // 默认：auto

空间剩余 比例分配；若0，则不分配 flex-grow

flex-grow:3;  /* 默认：0 */

空格不足，比例缩小；若0，则不缩小 flex-shrink

flex-shrink:3;    /* 默认：1 */

该子元素的对齐方式 align-self

auto、flex-start、flex-end、center、baseline、stretch

align-self: flex-end;

排序，数值小的排前面 order

order: <integer>;

order:3;

缩写

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

---

兼容

.box{
    display: -webkit-box;       /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */
    display: -moz-box;       /* 老版本语法: Firefox (buggy) */
    display: -ms-flexbox;       /* 混合版本语法: IE 10 */   
    display: -webkit-flex;      /* 新版本语法: Chrome 21+ */
    display: flex;           /* 新版本语法: Opera 12.1, Firefox 22+ */
 }

.flex1 {       
    -webkit-box-flex: 1         /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;            /* Chrome */  
    -webkit-flex: 1;         /* Chrome */  
    -ms-flex: 1                 /* IE 10 */  
    flex: 1;                        /* NEW, Spec - Opera 12.1, Firefox 20+ */
        
}

---

示例

ul{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

li{
    flex-basis: 100px;
}

li.li-1{
    order: 2;
    flex-grow: 1;
    flex-shrink: 1;
    align-self: flex-start;
}
li.li-2{
    order: 1;
    flex-grow: 2;
    flex-shrink: 3;
    align-self: center;
}
li.li-3{
    order: 3;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: flex-end;
}