tags: web frontend
需要排列的元素外層要有一個父元素來包覆所有內容
display: flex;
justify-content
這個屬性可以水平對齊元素位置
參數:
- flex-start: 元素和容器的左端對齊(main start)。
- flex-end: 元素和容器的右端對齊(main end)。
- center: 元素在容器置中。
- space-between: 元素之間保持相等的距離(左右元素將會與main start和main end貼齊)。
- space-around: 元素周圍保持相等的距離(間距也是平均分配)。
align-items
這個屬性可以垂直對齊元素位置(針對單行)
參數:
- flex-start: 元素與容器的頂部對齊(cross start)。
- flex-end: 元素與容器的底部對齊(cross end)。
- center: 元素垂直置中。
- baseline: 元素在容器中各自依照本身的文字基準線來對齊。
- stretch: 元素被拉伸以填滿整個容器(全部撐開至Flexbox的高度)。
flex-direction
這個屬性定義元素在容器中擺放的位置
參數
- row: 預設值，由左到右，從上到下(元素擺放的方向和文字方向一致)。
- row-reverse: 元素擺放的方向和文字的方向相反。
- column: 主軸從水平方向變為垂直方向，換言之，交錯軸變成水平方向，元素擺放由上到下，再從左到右(元素從上放到下)。
- column-reverse: 元素從下放到上。
order
這個屬性可以直接指定一個數字，就可以由數值小到大的排列順序，也可以設置單個元素的order屬性
用法
order: ...-1,0,1...;
align-self
它作用在所套用的內元件本身，並不影響其他元件的排列方式
參數與align-items相同
flex-wrap
這個屬性負責的是讓內容的元素換行
參數
- nowrap: 所有的元素都在一行。
- wrap: 元素自動換成多行。
- wrap-reverse: 元素自動換成逆序的多行
flex-flow
它為 flex-direction 和 flex-wrap 的縮寫
用法
flex-flow: row wrap;
align-content
這個屬性可以垂直對齊元素位置(多行的所有元素)
參數
- flex-start：對齊最上面的 cross start
- flex-end：對齊最下面的 cross end
- center：垂直置中
- space-between：將第一行與最後一行分別對齊最上方與最下方
- space-around：每行平均分配間距
- stretch：內容元素全部撐開
小坑
若是用過 flex-direction 之後，再使用 justify-content、align-items\content\self 須注意方向是否改變。
像是主軸變成垂直時，若要改動元素的水平擺放位置，應該設定 align-*，而非設定 justify-content
資源&參考
小青蛙遊戲網址
flexboxfroggy.com/#zh-tw
深入解析 CSS Flexbox
www.oxxostudio.tw/articles/20…
更詳細的 Flex 用法
hackmd.io/MYMw7AHAbMY…
