弹性盒子模型之flex属性总结

1、技术点：display:flex将块状元素能在一排显示；flex需要添加到父元素上；子元素默认从左到右进行排序。   2、justify-content：设置横轴的排列方式。  

justify-content: flex-start | flex-end | center | space-between | space-around;

  (1)flex-start:交叉轴的起点对齐。

.Box { 
　　　　background:blue; 
　　　　display: flex; 
　　　　justify-content：flex-start;
 }

  (2)flex-end:右对齐

.Box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：flex-end; 
 }    　

  (3)center:居中对齐

.Box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：center; 
 } 

  (4)space-between:两端对齐，项目之间的间隔相等。

.Box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：space-between; 
 } 

  (5)space-around：每个项目的两侧间隔相等，项目之间的间隔比项目与边宽的间隔大一倍。

.Box{ 
   　　 background:blue; 
　　　　display: flex; 
　　　　justify-content：space-around; 
 }

  3.align-items:设置竖轴的排列方式  

align-items: flex-start | flex-end | center | baseline | stretch;

　　

(1)flex-start:默认值，左对齐

.Box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items: flex-start;     
}

  (2)flex-end:交叉轴的终点对齐

.Box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items: flex-end;     
}

  (3)center：垂直居中

.Box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items:center;     
}

  (4)baseline：项目的第一行文字的基线对齐

.Box {        
　　　　 height: 700px;         
        background: blue;         
        display: flex;         
        align-items: baseline;     
}

我设了三个盒子设置了不同的字体大小，效果会更加明显。

  (5)stretch：默认值。如果项目未设置高度或设为auto，将占满容器的整个高度。

.Box {
　　　　height: 300px; 
       background: blue; 
       display: flex; 
       align-items: stretch;
} 
.Box div { 
　　　　/*不设置高度，元素在垂直方向上铺满父容器*/
 　　　　width: 200px; 
}