小程序display的flex容器属性

flex-direction 决定元素排列方向

flex-direction:row||column
/*默认为row,方向为水平,元素的排列方向即为主轴*/
/*另外垂直的方向为交叉轴*/

flex-wrap决定元素如何换行（排列不下时）

flex-wrap：wrap；
/*默认排列不下时换行*/

flex-wrap：nowrap；
/*默认不换行*/

flex-wrap：wrap-reverse；
/*反转，第一行放于下方，换行即往上换行*/

flex-flow

是flex-direction和flex-wrap的简写

flex-flow：row wrap
/*先写direction再写wrap*/

justify-content元素在主轴上的对齐方式

justify-content：center；
/*主轴如何就相对于什么对齐*/
justify-content：space-around；
/*如果存在多余空间就等分，元素前边空白*/
justify-content：space-between；
/*如果存在多余空间，就在元素之间插空*/
justify-content：flex-start；
/*主轴的前端*/
justify-content：flex-end；
/*主叉轴的后端*/

align-items元素在交叉轴的对齐方式

align-items：flex-start；
/*交叉轴的前端*/
align-items：flex-end；
/*交叉轴的后端*/
align-items：center；
/*交叉轴的中间*/
align-items：stretch；
/*如果元素在交叉轴方向未填满页面且未设置该方向的长度，
则自动将元素占满交叉轴方向*/
/*其他与flex-start相似*/

align-items：baseline；
/*让元素与元素内的文字机械对齐
/*其他与flex-start相似*/

flex-grow当有多余空间时，元素的放大比例

flex-grow:0;
/*默认值为0，容器有多余的容积时也不放大*/
flex-grow:1;
/*容器有多余的容积时，该元素只占据一份*/
flex-grow:2;
/*容器有多余的容积时，该元素占据两份*/

flex-shrink当空间不足时，元素的缩小比例

flex-shrink：1；
/*默认值为1，等比缩小*/
flex-shrink：0；
/*不缩小*/
flex-shrink：10；
/*被压缩十倍*/

flex-basis元素在主轴上占据的空间

flex-basis：250rpx；
/*需要以rpx为单位才行*/

flex是flex-grow，flex-shrink，flex-basis的简写

rder定义元素的排列顺序

align-self定义元素自身的对齐方式