CSS flex弹性盒子布局总结

说明:
@author: luzzz
Q: 1141178844 WX: 18335918153
l:主轴 z:交叉轴

flex弹性盒子
.flex-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+ */

从左至右
.box-lr

-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-moz-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;

从右至左
.box-rl

-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
-moz-flex-direction: row-reverse;
-webkit-flex-direction: row-reverse;
flex-direction: row-reverse;

从上至下
.box-tb

-webkit-box-direction: normal;
-webkit-box-orient: vertical;
-moz-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;

从下至上
.box-bt

-webkit-box-pack: end;
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
-moz-flex-direction: column-reverse;
-webkit-flex-direction: column-reverse;
flex-direction: column-reverse;

主轴居中
.box-l-center

-webkit-box-pack: center;
-moz-justify-content: center;
-webkit-justify-content: center;
justify-content: center;

主轴居左
.box-l-start

-webkit-box-pack: start;
-moz-justify-content: flex-start;
-webkit-justify-content: flex-start;
justify-content: flex-start;

主轴居右
.box-l-end

-webkit-box-pack: end;
-moz-justify-content: flex-end;
-webkit-justify-content: flex-end;
justify-content: flex-end;

主轴两端对齐(贴边)，剩余等分
.box-l-between

-webkit-box-pack: justify;
-moz-justify-content: space-between;
-webkit-justify-content: space-between;
justify-content: space-between;

主轴两两间隔相等, 剩余等分

.box-l-around

-moz-justify-content: space-around;
-webkit-justify-content: space-around;
justify-content: space-around;

交叉轴居中对齐

.box-z-center

-webkit-box-align: center;
-moz-align-items: center;
-webkit-align-items: center;
align-items: center;

交叉轴居左对齐
.box-z-start

-webkit-box-align: start;
-moz-align-items: start;
-webkit-align-items: flex-start;
align-items: flex-start;

交叉轴居右对齐
.box-z-end

-webkit-box-align: end;
-moz-align-items: end;
-webkit-align-items: flex-end;
align-items: flex-end;

指定单个子元素自定义对齐方式，即不同于其他子元素

指定子元素居中对齐
.self-align-center

align-self: center;
-webkit-align-self: center;
margin: 0 auto;

指定子元素顶部对齐
.self-align-start

align-self: flex-start;
-webkit-align-self: flex-start;

指定子元素底部对齐
.self-align-end

align-self: flex-end;
-webkit-align-self: flex-end;

指定子元素拉伸
.self-align-stretch

align-self: stretch;
-webkit-align-self: stretch;

子元素换行
.box-wrap

-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;

子元素不换行
.box-nowrap

-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;

允许子元素伸展（1倍）
.flex1

-moz-flex-grow: 1;
-webkit-flex-grow: 1;
flex-grow: 1;/*如果值是2 那么当前元素就是其他元素宽的2倍了*/

/*
说明：
flex:1 是 flex-grow、flex-shrink、flex-basis的缩写。故其取值可以考虑以下情况：
flex-grow:0表示不会拉伸 flex-shrink:1表示 可以缩小
flex 的默认值是以上三个属性值的组合。
假设以上三个属性取默认值，则 flex 的默认值是 0 1 auto
*/

允许子元素收缩(1倍)
.shrink1

-moz-flex-shrink: 1;
-webkit-flex-shrink: 1;
flex-shrink: 1;

水平居中
.box-center-center

display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
display: -moz-box;
-moz-box-align: center;
-moz-box-pack: center;
text-align: center;