[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]

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

display:-webkit-flex;

100px
width:200px

justify-content: flex-end

display:-webkit-flex;

100px
width:200px

justify-content: center

display:-webkit-flex;

100px
width:200px

justify-content: space-between

display:-webkit-flex;

100px
width:200px

justify-content: space-around

display:-webkit-flex;

100px
width:200px

[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;

100px
width:200px

align-items: flex-end;

display:-webkit-flex;

100px
width:200px

align-items: center;

display:-webkit-flex;

100px
width:200px

align-items: baseline;

display:-webkit-flex;

100px
width:200px

align-items: stretch;

display:-webkit-flex;

width:100px
height:100px
width:150px
min-height: 20px
width:150px
max-height: 60px

[align-content]

align-items: flex-start;/*对比align-items*/

display:-webkit-flex;

flex-wrap:wrap

a
b
c
d
e
f

align-content: flex-start;

display:-webkit-flex;

flex-wrap:wrap

a
b
c
d
e
f

align-content: flex-end;

display:-webkit-flex;

flex-wrap:wrap

a
b
c
d
e
f

align-content: center;

display:-webkit-flex;

flex-wrap:wrap

a
b
c
d
e
f

align-content: space-between;

display:-webkit-flex;

flex-wrap:wrap

a
b
c
d
e
f

align-content: space-around;

display:-webkit-flex;

flex-wrap:wrap

a
b
c
d
e
f

align-content: stretch;

display:-webkit-flex;

flex-wrap:wrap

a
b
c
d
e
f

[order]

display:-webkit-flex

a
b
c
d[order:-1]
e
f