| display |
flex |
定义一个盒子为弹性盒子 |
| flex-direction |
row |
子盒子水平排列，从左到右 |
|
row-reserve |
子盒子水平反向排列 |
|
column |
子盒子垂直排列，从上到下 |
|
column-reserve |
子盒子垂直反向排列 |
| flex-wrap |
no-wrap |
子盒子不换行,默认 |
|
wrap |
子盒子不换行 |
|
wrap-reverse |
换行并改变顺序 |
| justify-content |
flex-start |
flex子元素在最左边 |
|
flex-end |
flex子元素在最右边 |
|
center |
flex子元素在正中间 |
|
space-between |
平分flex容器 |
|
space-around |
平分flex容器,但是每个子元素两边是子元素间距的一半 |
| align-content |
flex-start |
flex子元素在最上边 |
|
flex-end |
flex子元素在最下边 |
|
center |
flex子元素在纵向正中间 |
|
space-between |
纵向平分flex容器 |
|
space-around |
纵向平分flex容器,但是每个子元素两边是子元素间距的一半 |
|
stretch |
默认：li将ul划分 |
| align-items |
flex-start |
flex子元素在最上边 |
|
flex-end |
flex子元素在最下边 |
|
center |
flex子元素在纵向正中间 |
|
baseline |
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐 |
|
stretch |
高度100%,宽度自动 |
| align-self |
flex-start |
flex子元素在最上边 |
|
flex-end |
flex子元素在最下边 |
|
center |
flex子元素在纵向正中间 |
|
baseline |
如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐 |
|
stretch |
高度100%,宽度自动 |
| order |
1(number) |
改变顺序 |
| flex |
1(number) |
该元素占子元素剩余位置的比例 |