*{
    margin:0;
    padding:0;
    list-style:none;
}

.container{

    width:100%;
    max-width:1440px;
    margin:auto;
    
    box-sizing:border-box;
    padding:0 15px;
}


.row{
    margin:0 -15px;
}

/* 這表示 我所有裝置都要採用 .row-flex  =================*/
.row-flex{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    margin:0 -15px;
}

/* 因為有可能 手機支援flex 桌機比較有可能出現不支援，所以我們把它由大寫到小
但這不是一定的，要看你的需求去改變 */


/* 這表示 平板的直向 要做 flex  =================*/
@media screen and (max-width:991px){
    /* 這個寫法是 sm 以下都要要套用這個格線系統 */
    .row-sm-flex{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        margin:0 -15px;
    }
}
/* 這表示 平板的橫向 要做 flex  =================*/
@media screen and (max-width:1199px){
    /* 這個寫法是 md  以下都要要套用這個格線系統 */
    .row-md-flex{
        display:flex;
        flex-direction:row;
        flex-wrap:wrap;
        margin:0 -15px;
    }
}



.container::after,
.row::after{
    content:'';
    display:block;
    clear:both;
}

div[class^="col-"]{
    float:left;
    padding:0 15px;
    box-sizing:border-box;
}
/* 每一欄占的寬度 */
/* 手機 但各裝置也會套用，但符合某 媒體查詢的 會被 覆寫 */
.col-1{width:8.333333%;}
.col-2{width:16.666666%;}
.col-3{width:25%;}
.col-4{width:33.333333%;}
.col-5{width:41.666666%;}
.col-6{width:50%;}
.col-7{width:58.333333%;}
.col-8{width:66.666666%;}
.col-9{width:75%;}
.col-10{width:83.333333%;}
.col-11{width:91.666666%;}
.col-12{width:100%;}

/* flex: flex-grow伸展值  flex-shrink收縮值  flex-basis基本值 */
/* flex-basis直接取代 width */

.col-1{ width:8.333333%; flex: 0 0 8.333333%;}
.col-2{ width:16.666666%; flex: 0 0 16.666666%;}
.col-3{ width:25%; flex: 0 0 25%;}
.col-4{ width:33.333333%; flex: 0 0 33.333333%;}
.col-5{ width:41.666666%; flex: 0 0 41.666666%;}
.col-6{ width:50%; flex: 0 0 50%;}
.col-7{ width:58.333333%; flex: 0 0 58.333333%;}
.col-8{ width:66.666666%; flex: 0 0 66.666666%;}
.col-9{ width:75%; flex: 0 0 75%;}
.col-10{ width:83.333333%; flex: 0 0 83.333333%;}
.col-11{ width:91.666666%; flex: 0 0 91.666666%;}
.col-12{ width:100%; flex: 0 0 100%;}

/* 媒體查詢 */
/* 利用class名稱的差異性去做個覆寫，達到不同裝置 產生作用 套用不同的格線設定 */
/* 平板-直向 */
@media screen and (min-width:768px){
    .col-md-1{ width:8.333333%; flex: 0 0 8.333333%;}
    .col-md-2{ width:16.666666%; flex: 0 0 16.666666%;}
    .col-md-3{ width:25%; flex: 0 0 25%;}
    .col-md-4{ width:33.333333%; flex: 0 0 33.333333%;}
    .col-md-5{ width:41.666666%; flex: 0 0 41.666666%;}
    .col-md-6{ width:50%; flex: 0 0 50%;}
    .col-md-7{ width:58.333333%; flex: 0 0 58.333333%;}
    .col-md-8{ width:66.666666%; flex: 0 0 66.666666%;}
    .col-md-9{ width:75%; flex: 0 0 75%;}
    .col-md-10{ width:83.333333%; flex: 0 0 83.333333%;}
    .col-md-11{ width:91.666666%; flex: 0 0 91.666666%;}
    .col-md-12{ width:100%; flex: 0 0 100%;}
}
/* 平板-橫向  直接照抄 bootstrap 4*/ 
/* lg large的意思 */
@media screen and (min-width:992px){
    .col-lg-1{ width:8.333333%; flex: 0 0 8.333333%;}
    .col-lg-2{ width:16.666666%; flex: 0 0 16.666666%;}
    .col-lg-3{ width:25%; flex: 0 0 25%;}
    .col-lg-4{ width:33.333333%; flex: 0 0 33.333333%;}
    .col-lg-5{ width:41.666666%; flex: 0 0 41.666666%;}
    .col-lg-6{ width:50%; flex: 0 0 50%;}
    .col-lg-7{ width:58.333333%; flex: 0 0 58.333333%;}
    .col-lg-8{ width:66.666666%; flex: 0 0 66.666666%;}
    .col-lg-9{ width:75%; flex: 0 0 75%;}
    .col-lg-10{ width:83.333333%; flex: 0 0 83.333333%;}
    .col-lg-11{ width:91.666666%; flex: 0 0 91.666666%;}
    .col-lg-12{ width:100%; flex: 0 0 100%;}
}
/* 桌機 */
@media screen and (min-width:1200px){
    .col-xl-1{ width:8.333333%; flex: 0 0 8.333333%;}
    .col-xl-2{ width:16.666666%; flex: 0 0 16.666666%;}
    .col-xl-3{ width:25%; flex: 0 0 25%;}
    .col-xl-4{ width:33.333333%; flex: 0 0 33.333333%;}
    .col-xl-5{ width:41.666666%; flex: 0 0 41.666666%;}
    .col-xl-6{ width:50%; flex: 0 0 50%;}
    .col-xl-7{ width:58.333333%; flex: 0 0 58.333333%;}
    .col-xl-8{ width:66.666666%; flex: 0 0 66.666666%;}
    .col-xl-9{ width:75%; flex: 0 0 75%;}
    .col-xl-10{ width:83.333333%; flex: 0 0 83.333333%;}
    .col-xl-11{ width:91.666666%; flex: 0 0 91.666666%;}
    .col-xl-12{ width:100%; flex: 0 0 100%;}
}

/* 以上是 flex 格線系統 ＝＝＝＝＝＝ */



/* 套用使用範例請看 day3_6 格線系統套用示範2.html */