弹性盒模型

更够更好的响应式布局。
例子

• HTML：

    
    
    
    


    

        
one
        
two
        
three
        
four
        
five
    

• CSS：

.menu{
    list-style-type: none;
    padding: 0;
    margin: 0px;
    /*激活弹性布局*/
    display: flex;
    /*设置主轴方向以及是否换行*/
    flex-flow: row wrap;
}
.menu li{
    height: 40px;
    text-align: center;
    line-height: 40px;
    /*设置弹性子元素的空间分配*/
    /*最小情况下的弹性子元素布局*/
    flex: 1 1 100%;
}
.menu li a{
    color: white;
    text-decoration: none;
}
.menu li:nth-child(1){
    background-color: red;
}
.menu li:nth-child(2){
    background-color: orange;
}
.menu li:nth-child(3){
    background-color: yellow;
}
.menu li:nth-child(4){
    background-color: green;
}
.menu li:nth-child(5){
    background-color: purple;
}
/*进行媒体查询：为了判断设备*/
@media screen and (min-width: 480px){
    .menu li{
        flex: 1 1 50%;
    }
}
@media screen and (min-width: 768px) {
    .menu{
        flex-flow: row nowrap;
    }
}

• 效果

  • 大于768px的时候

  • 480px

SCREEN<480px