flexbox

flexbox

flexbox佈局是伸縮容器（container）和伸縮專案組成（item）佈局的主題思想是元素可以改變大小以適應可用空間

伸縮容器的屬性

• display

• flex 塊級伸縮容器

• inline-flex 行內伸縮容器

• flex-direction

• 指定主軸方向

• row 水平 從左到右

• column 垂直 從上到下

• row-reverse 水平從右到左

• column 垂直從下到上

• flex-warp

• 伸縮容器主軸方向空間不足的時候 是否換行 該如何換行

• nowarp 預設值 不會換行 自動縮放

• wrap 自動換行 主軸方向

• warp-reverse 自動換行 主軸反向

• flex-flow

• 2和3的綜合

• flex-flow : row nowrap

• justify-content

• 用來定義伸縮專案在主軸線的伸縮方式

• flex-start 主軸線起始方向對齊 預設值

• flex-end 主軸線結束位置對齊

• center 主軸方向居中

• space-between 伸縮專案平均分佈在主軸線上

• space-around 伸縮專案平均分佈在主軸線上，兩邊保留一半空間

• align-items

• 用來定義伸縮專案在交叉軸上的對齊方式

• flex-start 交叉軸起始方向對齊 預設值

• flex-end 交叉軸結束位置對齊

• center 交叉軸向居中

• baseline 伸縮專案根據基準線對齊（樓梯）

• strech 伸縮專案拉伸填充

• align-content

• 伸縮專案出現換行後在交叉軸上的對齊方式

• flex-start 交叉軸起始方向

• flex-end 交叉軸結束方向

• center 交叉軸中興

• space-between 平分交叉軸

• space-around 平分交叉軸 交叉軸兩邊留有一半空間

• strech 預設值

伸縮專案的屬性

• order

• 定義專案排列順序 數值越小 排列越靠前 預設值是0 order：0

• flex-grow

• 主軸方向有剩餘空間時

• 定義伸縮專案的放大比例 預設值0 表示存在剩餘空間也不放大

• flex-shrink

• 主軸方向空間不足時

• 定義伸縮專案的收縮能力 預設值為1 flex-shrink:1

• flex-basis

• 用來設定伸縮專案的基準值 剩餘空間按比例進行伸縮

• flex-basis：length

• flex-basis： auto 預設值

• flex

• flex-grow flex-shrink flex-basis三個屬性的縮寫，

• 其與語法 flex:none

• flex-grow flex-shrik flex-basis 其中第二個和第三個引數為可選值

• 預設值 0 1 auto

• algin-self

• 用來設定單獨伸縮專案在交叉軸的對齊方式，會覆蓋預設的對齊方式

• auto

• flex-start 交叉軸起始方向

• flex-end 交叉軸結束方向

• center 交叉軸中心

• baseline 交叉軸上的基準線對齊

• stretch 交叉軸方向佔滿伸縮容器 （交叉軸為垂直方向的話，只有在不設定高度情況下 起作用）