https://caniuse.com/    檢視 css某個屬性，相容情況
css3  flex佈局

盒子模型

 box-sizing:border-box;
    預設: content-box    平時普通盒子模型，padding，border， 盒子會變大,向外擴充套件
    border-box    盒子模型，padding,border, 盒子模型不變大,向內擴充套件
   calc(公式)    注意:  + - *  /
    calc(100px-20px)    ×
    calc(100px - 20px)    √
=====================================

flex佈局
父級:
    display:flex;

    新增瀏覽器字首:  -webkit-   ,真實工作，postCss外掛

    display:-webkit-box;

    * 如果用了彈性佈局，子元素，不需要浮動 float

父級身上其他屬性:
    justify-content:    子元素水平排列方式
        center    居中    √
        space-between    兩端對齊    √
        space-around        子元素分散排列    √
        flex-start    居左
        flex-end    居右
    align-items: 

      子元素垂直排列
        center        居中
        flex-end    底部
        flex-start    開始
        align-content        多行的時候，垂直排列
        center        居中
        ..
    flex-direction:        排列方式
        row    橫向排列
        row-reverse    橫向翻過排列
        column    縱向排列
        column-reverse    縱向翻過排列
    flex-wrap:    子元素是否在一行顯示
        nowrap    不換行
        wrap        換行

    flex-flow: <flex-direction> <flex-wrap>    

================================================

子級身上屬性:
    flex:1        1 指的是一個係數    √

    * 子元素在劃分父元素寬度，先刨除固定寬度

    align-self    其實就是用來覆蓋父級 align-items  垂直排列
        

    flex-grow: 1;    定義子元素放大比例

    order:    規定子元素順序，排序
        數值越小，越靠前
        預設值0