伸縮容器的屬性
display: flex
定義為彈性布局
flex-direction 決定主軸的方向
flex-directon: row
默認值,定義主軸方向為X軸,從左到右排列;
flex-directon: row-reverse
定義主軸方向為X軸,從右到左排列;
flex-directon: column
定義主軸方向為Y軸,從上到下排列;
flex-directon: column-reverse
定義主軸方向為Y軸,從下到上排列;
justify-content 元素在主軸方向上的對齊方式
justify-content: flex-start
默認值,定義元素在主軸方向的起始位置對齊;
justify-content: flex-end
定義元素在主軸方向的結束位置對齊;
justify-content: center
定義元素在主軸方向的中心位置對齊;
justify-content: space-between
定義元素平局分配在主軸上, 第一個元素在主軸的起始位置,最后一個元素在主軸的結束位置;
justify-content: space-around
在每行上均勻分配彈性元素,相鄰元素間距相等,每行第一個元素到行首的距離和最后一個元素到行尾的距離相鄰元素間的一半;
align-items 元素在交叉軸方向上的對齊方式
align-items: flex-start
定義元素在交叉軸方向上的起始位置對齊;
align-item: flex-end
定義元素在交叉軸方向上的結束位置對齊;
align-item: center
定義元素在交叉軸方向上的中心位置對齊;
align-item: stretch
默認值,當元素沒有設置大小時,主軸方向上的尺寸由內容撐開,交叉軸方向上的尺寸自適應鋪滿。
align-item: baseline
設置元素基線對齊;
align-content定義了多根軸線的對齊方式。
如果項目只有一根軸線,該屬性不起作用。
align-content: flex-start
定義元素在交叉軸方向上的起始位置對齊;
align-content: flex-end
定義元素在交叉軸方向上的結束位置對齊;
align-content: center
定義元素在交叉軸方向上的中心位置對齊;
align-content: stretch
默認值,當元素沒有設置大小時,主軸方向上的尺寸由內容撐開,交叉軸方向上的尺寸自適應鋪滿。
align-content: space-between
與交叉軸兩端對齊,軸線之間的間隔平均分布。
align-content: space-around
每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
flex-wrap 定義元素是否換行
flex-wrap: nowrap
默認值 不換行;
flex-wrap: wrap
換行,第一行在上方;
flex-wrap: wrap-reverse
換行第一行在下方;
flex-flow
flex-flow是flex-direction和flex-wrap的簡寫形式,默認值為:row nowrap;
伸縮子項的屬性
order定義伸縮子項的排列順序
默認值為0,數值越小,排列越靠前,可以設置負值
flex-grow 定義伸縮子項的放大比例
默認值為0,即如果存在剩余空間,也不放大;
如果所有項目的flex-grow屬性都為1,則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2,其他項目都為1,則前者占據的剩余空間將比其他項多一倍。
flex-shrink 定義伸縮子項的縮小比例
默認值為1,即如果空間不足,該項目將縮小;
如果所有項目的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果一個項目的flex-shrink屬性為0,其他項目都為1,則空間不足時,前者不縮小。
flex-basis 項目占據的主軸空間
當成width使用;
flex 復合寫法
flex: flex-grow flex-shrink flex-basis;
該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。
align-self 允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性
align-self: auto
默認值,表示繼承元素的align-items屬性
align-self: flex-start
定義元素在交叉軸方向上的起始位置對齊;
align-self: flex-end
定義元素在主軸方向的結束位置對齊;
align-self: center
定義元素在交叉軸方向上的中心位置對齊;
align-self: baseline
設置元素基線對齊;
align-self: stretch
當元素沒有設置大小時,主軸方向上的尺寸由內容撐開,交叉軸方向上的尺寸自適應鋪滿。