关于flex布局的一些简单用法

 

效果（下图）

实现代码：

     
     
    
      
       这是子盒子
      
     
//css.wrap {    display: flex;    width: 300px;    height: 300px;    background-color: #ccc;    justify-content: center;//子盒子位于现在的位置    //justify-content: flex-start;子盒子位于现在的位置 的左边     //justify-content: flex-end;子盒子位于现在的位置 的右边  }.content {    width: 100px;    height: 100px;    line-height: 100px;    text-align: center;    background-color: orange;}

效果（如下图）

     
     
    
      
       这是子盒子
      
     
//css.wrap {    display: flex;    width: 300px;    height: 300px;    background-color: #ccc;}.content {    width: 100px;    height: 100px;    line-height: 100px;    text-align: center;    background-color: orange;    align-self: center;//位于上图中现在的位置    //align-self: flex-start;位于上图中现在的位置  的上方    //align-self: flex-end;位于上图中现在的位置  的下方}

//用于父元素justify-content: center | flex-start | flex-end;// 中  左   右  三个位置//用于子元素align-self: center | flex-start | flex-end;// 中  上   下  三个位置//两个属性相互结合，就可以做到很多布局

转化成flex的元素的子元素默认是排在一行的

flex-wrap:wrap（换行-在下方）| nowrap（换行-在上方）| none （默认-不换行）

    
             
     
    
      
       1
      
    
      
       2
      
    
      
       3
      
    
      
       4
      
    
      
       5
      
     

上面代码的效果图（默认不换行）：

    
             
     
    
      
       1
      
    
      
       2
      
    
      
       3
      
    
      
       4
      
    
      
       5
      
     

上面代码的效果图（换行-在下方）

以后有在了解的再补上