CSS flex 排版
缺點 - 無法跨行跨列排版
可參考 -> https://codepen.io/Jimmywei01/pen/wbemBx?editors=1100
flex 排版方向位置
flex - 依照 排版方向(row column) 決定 分布位置( justify-content-主軸 align-items-副軸)
- 水平的起點與終點 ( main start、main end )
- 垂直的起點與終點 ( cross start、cross end )
- 水平軸與垂直軸 ( main axis、cross axis )
- 元素具有水平尺寸與垂直尺寸 ( main size、cross size )
flex 外容器屬性
- display
- flex-direction
- justify-content
- flex-wrap
- align-items
- align-content
flex 內元件屬性
- flex
- flex-grow
- flex-shrink
- flex-basis
- align-self
- order
外容器
display
- flex
- inline-flex
flex-direction - 分布方向
- column：從上到下
- column-reverse：與 column 相反
- row：預設值，由左到右
- row-reverse：與 row 相反
justify-content - 主軸 flexbox 的「水平對齊」位置
- flex-start：預設值，對齊最左邊的 main start
- flex-end：對齊最左邊的 main end
- center：水平置中
- space-between：平均分配內容元素，左右元素將會與 main start 和 main end 貼齊
- space-around：平均分配內容元素，兩旁間距平均分配
- space-evenly(空間均勻)：平均分配全部內容元素
flex-wrap - 超出範圍時是否換行的屬性，分為換行、不換行、換行時反轉
- nowrap：預設值，單行
- wrap：多行
- wrap-reverse：多行，但內容元素反轉
align-items - 副軸(單行元素) Flexbox 的「垂直對齊」位置
無效屬性: space-between , space-around , space-evenly
- flex-start：預設值，對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- stretch：將內容元素全部撐開至 flexbox 的高度
- 在高度被限制的情況下不會正常伸展
- baseline：以所有元素內容的基線作為對齊標準
物件排列: justify-content + align-items
align-content - 副軸(多行元素) flexbox 的「垂直對齊」位置
- flex-start：預設值，對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- space-between：將第一行與最後一行分別對齊最上方與最下方
- space-around：每行平均分配間距
- stretch：內容元素全部撐開
內元件
flex
- 由三個屬性組合而成，
flex-grow、flex-shrink、flex-basis，如果 flex 只填了一個數值(無單位)，那麼預設就是以flex-grow的方式呈現- flex-grow : 指定 flex 項目的放大比例，按照數字做相對應的「伸展」比例分配，預設值為 0，不會進行彈性變化，不可為負值，設為 1 則會進行彈性變化
- flex-shrink：指定 flex 項目的縮小比例，按照數字做相對應的「壓縮」比例分配(值越大壓縮越小)，預設值為 1，設為 0 的話不會進行彈性變化，不可為負值
- flex-basis： 元件的基準值，可使用不同的單位值，子元素的基本大小作為父元素的大小比較基準，預設值為 0，沒有設定的時候會以直接採用 flex-grow 屬性
align-self - 和 align-items 相同，但目的不同(多行元素處理) align-self 的作用在於覆寫已經套用 align-items 的屬性
- flex-start：預設值，對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- stretch：將內容元素全部撐開至 flexbox 的高度
- baseline：以所有元素內容的基線作為對齊標準
order - 控制 flex 容器中 flex 項目的排列順序，默認值為 0
- CSS 設定 排列順序：-1、flex:2、0、1、2
