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 */
    }