flex弹性布局-flex属性

.box {
        display: flex;
        /* justify-content:  子元素水平排列的方式 */  
        justify-content: center; /* 居中 */
        justify-content: space-between;  /* 两端对齐 */
        justify-content: space-around;   /* 子元素对等分布 */
        justify-content: flex-start;   /* 居左 */
        justify-content: flex-end;     /* 居右 */
        /* align-items: 子元素垂直排列方式 */
        align-items: center;    /* 居中 */
        align-items: flex-end;  /* 底部 */
        align-items: flex-start;  /* 顶部 */
        /* flex-direction:  排列方式 */
        flex-direction: row; /* 横向排列 */
        flex-direction: row-reverse;  /* 横向反转 */
        flex-direction: column;  /* 纵向排列 */
        flex-direction: column-reverse;  /* 纵向反转排列 */
         /* flex-wrap: 子元素是否在一行显示 */
         flex-wrap: nowrap;  /* 默认值 不换行 */
         flex-wrap: wrap;  /* 换行 */
         /* align-content: 多行的时候，垂直排列 */
         align-content: center;  /* 居中 */
         align-content: flex-end;  /* 底部 */
         align-content: flex-start;  /* 顶部 */
    }
    .inner {
       /* 子元素身上的属性 */
       flex: 1;   /* 1指的是一个系数 ， 子元素在划分父元素的宽度，先刨除固定宽度*/
       flex-grow: 1; /* 定义子元素放大比例 用于设置或检索弹性盒的扩展比率。简单说就是，是其他盒子的几倍 */
       align-self: flex-start; /* 其实就是用来覆盖父级的 align-items 的*/
       order: 0;  /* 规定子元素的顺序，排序，数值越小越靠前，默认值0 */
    }