Web的Flex弹性盒模型

[ flex ]

display: -webkit-flex;

width:100px;
flex: 2;
flex: 1;

display: -webkit-flex;

width:150px; margin-right:10px;
flex: 1;
width:150px; margin-left:10px;

[ flex-direction ]

flex-direction: row; /*default*/

display: -webkit-flex;

flex: 1;
flex: 2;
flex: 3;

flex-direction: row-reverse;

display: -webkit-flex;

flex: 1;
flex: 2;
flex: 3;

flex-direction: column;

display: -webkit-flex;

flex: 1;
flex: 2;
flex: 3;

flex-direction: column-reverse;

display: -webkit-flex;

flex: 1;
flex: 2;
flex: 3;

[ flex-wrap ]

-webkit-flex-wrap: nowrap; /* default */

display: -webkit-flex;

width: 400px

100px;
width: 200px;
width: 300px;

-webkit-flex-wrap: wrap

display: -webkit-flex;

width: 400px

100px;
width: 200px;
width: 300px;

-webkit-flex-wrap: wrap-reverse

display: -webkit-flex;

width: 400px

100px;
width: 200px;
width: 300px;

[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */

[ justify-content ]

/* 效果如同 float:left; */

justify-content: flex-start; /* default */

display: -webkit-flex;

width:100px;
width:100px;

/* 效果如同 float:right; */

justify-content: flex-end;

display: -webkit-flex;

width:100px;
width:100px;

/* 第三代水平居中方案 */

justify-content: center;

display: -webkit-flex;

width:100px;
width:100px;

justify-content: space-between;

display: -webkit-flex;

width:100px;
width:100px;

justify-content: space-around;

display: -webkit-flex;

width:100px;
width:100px;

[ align-self ]

display: -webkit-flex;

align-self:flex-start;
align-self:flex-end;
align-self:center;
align-self:auto; /*default */
align-self:baseline;
align-self:stretch;

[ align-items ]

align-items: flex-start; /* default */

display: -webkit-flex;

width:100px;
width:100px;

align-items: flex-end;

display: -webkit-flex;

width:100px;
width:100px;

/* 第三代垂直居中 */

align-items: center;

display: -webkit-flex;

width:100px;
width:100px;

align-items: baseline;

display: -webkit-flex;

width:100px;
width:100px;

align-items: stretch;

display: -webkit-flex;

height:100px;
min-height:20px;
max-height:60px;

[ align-content ]

/* 对比 align-items*/

align-items: flex-start

display: -webkit-flex;

a
b
c
d
e
f

align-content: flex-start;

display: -webkit-flex;

a
b
c
d
e
f

align-content: flex-end;

display: -webkit-flex;

a
b
c
d
e
f

align-content: center;

display: -webkit-flex;

a
b
c
d
e
f

align-content: space-between;

display: -webkit-flex;

a
b
c
d
e
f

align-content: space-around;

display: -webkit-flex;

a
b
c
d
e
f

align-content: stretch; /*default*/

display: -webkit-flex;

a
b
c
d
e
f

[ order ]

display: -webkit-flex;

a
b
c
d (order:-1)
e
f