(2)Merry Christmas(桌機main)

【範例結果】

四、Flex 應用

section1 :Flex 應用 (1)

刪除以下先前CSS設定:

/*section1===============================================*/
section:nth-child(1) {
    overflow: hidden;
    height: 500px;
}
#sec1 {
    float: left; height: 100%;
    width: 25%;
}
#sec2 {
    float: left; height: 100%;
    width: 50%;
}
#sec3 {
    float: left; height: 100%;
    width: 25%; 
}

Flex設定

section:nth-child(1) {
    
    /*flex加入*/
    display: flex;
}

#sec1 { flex: 1; }
#sec2 { flex: 2; }
#sec3 { flex: 1; }