1.弹性盒模型flexbox

1）弹性容器属性 flex container

flex-direction

flex-wrap

复合属性flex-flow

justify-content

align-items

align-content

2）弹性子元素属性flex item

3）Flexbox菜单项目实战

宽度大于768px

宽度大于480px小于768px

宽度小于480px

<!DOCTYPE html>
<html>  
<head>
<meta charset="utf-8"> 
<title>弹性响应式布局实现菜单栏</title> 
<style> 
    .menu{
        list-style-type:none;
        padding:0;
        margin:0;
        <!--弹性容器设置弹性布局 -->
        display:flex;
        <!--设置水平方向为主轴方向，溢出自动换行 -->
        flex-flow:row wrap;
    }
    
    .menu li{
      height:40px;
      text-align:center;
      line-height:40px;
      flex:1 1 100%;
    }
    .menu li:nth-child(1){
        background-color:#39ADD1;
    }
        .menu li:nth-child(1){
        background-color:#39ADD1;
    }
        .menu li:nth-child(2){
        background-color:#3079AB;
    }
        .menu li:nth-child(3){
        background-color:#982551;
    }
        .menu li:nth-child(4){
        background-color:#E15258;
    }
        .menu li:nth-child(5){
        background-color:#CC6699;
    }
    .menu li:nth-child(6){
        background-color:#52AC43;
    }
    
    .menu li a{
      color:#fff;
      text-decoration:none;
    }
    
    @media only screen and (min-width:480px){
        .menu li{
            flex:1 1 50%;
        }
    }
    @media only screen and (min-width:768px){
        .menu {
            <!--设置flex容器：不换行 -->
            flex-flow:row nowrap;
        }
    }
</style>
</head>
<body>
 <ul class=menu>
     <li><a href="#">HTML</a></li>
     <li><a href="#">CSS</a></li>
     <li><a href="#">Javascript</a></li>
     <li><a href="#">Jquery</a></li>
     <li><a href="#">Less</a></li>
     <li><a href="#">Sass</a></li>
</ul>
</body>
</html>