彈性盒子
父元素
display:flex; 設置元素為彈性盒子
flex-direction 設置彈性盒子軸(x,y,軸)與排列 flex-wrap 設置容器為單行或多行
flex-direction: row | row-reverse | column | column-reverse
justify-content 設置子元素如何在當前軸方向的排列
justify-content: flex-start | flex-end | center | space-between | space-around
align-items 設置子元素在垂直於軸方向上的排列
align-items: flex-start | flex-end | center | baseline | stretch
flex-wrap 屬性用於指定彈性盒子的子元素換行方式
flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;
aline-content align-content 屬性用於修改 flex-wrap 屬性的行為。類似於 align-items, 但它不是設置彈性子元素的對齊，而是設置各個行的對齊。
align-content: flex-start | flex-end | center | space-between | space-around | stretch
子元素
order 設置子元素出現順序
flex 簡寫 flex-grow(grow) 擴展比例 flex-shrink(收縮比例) flex-basis(寬度，像素值) 縮寫
flex: auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ]
align-self 設置單獨子元素如何沿着縱軸排列，能夠覆蓋容器中的 align-items屬性
align-self: auto | flex-start | flex-end | center | baseline | stretch
