flex彈性盒子佈局常用語法篇
1. flex-direction:設定flex子元素的排列順序
row ：從左到右；
row-reverse：橫向反向；
column:從上到下；
column-reverse：縱向反向；
2.flex-wrap：設定flex子元素是否換行
nowrap：預設不換行；
wrap：換行；
wrap-reverse：換行並改變順序；
3.justify-content：flex子元素的橫向的排列順序
flex-start：flex子元素在最左邊；
flex-end：flex子元素在最右邊；
center：flex子元素在正中間；
space-between：平分flex容器；
space-around：平分flex容器，但是每個子元素兩邊是子元素間距的一半；
4.align-content：flex元素在縱向上的排列方式(一般處理多行)；
flex-start：flex子元素在最上邊；
flex-end：flex子元素在最下邊；
center：flex子元素在縱向正中間；
space-between:縱向平分flex容器；
space-around:縱向平分flex容器,但是每個子元素兩邊是子元素間距的一半；
stretch:預設；
5.align-items:flex子元素在縱向上的排列方式(一般是處理單行)；
flex-start:flex子元素在最上邊；
flex-end:flex子元素在最下邊；
center：flex子元素在縱向正中間；
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊；
stretch：高度100%，寬度自動；
6. align-self: 針對flex的子元素；
flex-start:flex子元素在最上邊；
flex-end:flex子元素在最下邊；
center：flex子元素在縱向正中間；
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊；
stretch：高度100%，寬度自動；