flex布局属性值用法汇总

1、弹性盒子声明

div {
   display:flex;
}

2、父级盒子属性设置

div {  
 /* justify-content 主轴对齐方式*/
            justify-content: space-between;
            justify-content: space-evenly;
            justify-content: space-around;
            justify-content: center;
            justify-content: flex-end;
            /* flex-direction 项目排列方式 */
            /* 垂直排列 */
            flex-direction: column;
            /* 水平排列 */
            flex-direction: row;
            /* 水平反向 */
            flex-direction: row-reverse;
            /* 垂直反向 */
            flex-direction: column-reverse;
            /* flex-warp 设置多行排列 */
            /* 换行排列 */
            flex-wrap: wrap;
            /* 换行反向 */

            flex-wrap: wrap-reverse;
            /* align-items 元素行内对齐方式*/
            /* 居中*/
            align-items: center;
            /* 底部 */
            align-items: flex-end;
            /* 基线 */
            align-items: baseline;
            /* 顶部 */
            align-items: flex-start;
            /* align-content 多行排列在交叉轴上的行内的对齐方式 */
            /* 交叉轴起点开始排列 */
            align-content: flex-start;
            /* 中点开始排列 */
            align-content: center;
            /* 交叉点终点开始排列 */
            align-content: flex-end;
            /* 同flex-direction */
            align-content: space-around;
            align-content: space-between;
            
}

3、子级元素属性值

div {
            /*  元素的排列顺序，数值越小排列越靠前，0默认*/
            order: 0;
            /* 主轴溢出收缩因子 1是默认，不可取负值*/
            flex-shrink: 1;
            /*  扩张因子，非负*/
            flex-grow: 0;
            /*  */
            flex-basis: 2;
            /* flex: flex-grow flex-shrink flex-basis; */
            /*  align-self 覆盖 align-items */
}