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; 
}