css3 flex

flex-direction:row <!--（橫向從左到右排列==左對齊）-->

flex-direction:row-reverse <!--（與row 相反）-->

 

flex-direction:column <!--（從上往下排列==頂對齊）-->

 

flex-direction:column-reverse <!--（與column 相反）-->

 

flex-wrap: （內容一行容不下的時候纔有效） 

flex-wrap:nowrap （超出不換行，很奇怪裏面的寬度會變成100%）

 flex-wrap:wrap （超出按父級的高度平分）

flex-wrap:wrap-reverse（與wrap 相反） 

justify-content: （水平對齊方式）

　 flex-start （水平左對齊）

 

justify-content:flex-end; （水平右對齊） 

justify-content:center; （水平居中對齊）

 justify-content:space-between; （兩端對齊）

 

justify-content:space-around; （兩端間距對其） 

 

align-items: （垂直對齊方式） 

align-items:stretch; （默認）

align-items:flex-start; （上對齊，和默認差不多）

align-items:flex-end; （下對齊） 

align-items:center;（居中對齊）

align-items:baseline; （基線對齊） 

 

.mobileImg{
            width: 200/@bt;
            height: 100%;
            background-color: #B3B3B3;
            display: flex;
            justify-content:flex-end;<!-- 將圖片靠右顯示 -->
            align-items:center; <!-- 將圖片垂直居中 -->
            img{
                width: 160/@bt;
                height: 144/@bt;
            }
        }