flex弹性盒子常用属性
| 属性 | 值 | 描述 |
|---|---|---|
| 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) | 该元素占子元素剩余位置的比例 |