CSS Flex布局
阿新 • • 發佈:2018-02-10
auto -a 如果 col 是否 不足 around 可選值 nowrap 1,即如果空間不足,該項目將縮小。
flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。
容器屬性
flex-direction屬性
決定主軸的方向。
有4個可選值:
- row(默認值):主軸為水平方向,起點在左端。
- row-reverse:主軸為水平方向,起點在右端。
- column:主軸為垂直方向,起點在上沿。
- column-reverse:主軸為垂直方向,起點在下沿。
flex-wrap屬性
決定一條軸線排不下,如何換行。
有3個可選值:
- nowrap(默認):不換行。
- wrap:換行,第一行在上方。
- wrap-reverse:換行,第一行在下方。
justify-content屬性
決定項目在主軸上的對齊方式
有5個可選值:
- flex-start(默認值):左對齊
- flex-end:右對齊
- center: 居中
- space-between:兩端對齊,項目之間的間隔都相等。
- space-around:每個項目兩側的間隔相等。
align-items屬性
決定項目在交叉軸上如何對齊
有5個可選值:
- flex-start:交叉軸的起點對齊。
- flex-end:交叉軸的終點對齊。
- center:交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
align-content屬性
決定多根軸線的對齊方式
有6個可選值:
- flex-start:與交叉軸的起點對齊。
- flex-end:與交叉軸的終點對齊。
- center:與交叉軸的中點對齊。
- space-between:與交叉軸兩端對齊,軸線之間的間隔平均分布。
- space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch(默認值):軸線占滿整個交叉軸。
項目屬性
order屬性
決定項目的排列順序。數值越小,排列越靠前,默認為0。
flex屬性
flex屬性是flex-grow, flex-shrink 和 flex-basis 的簡寫,默認值為0 1 auto。後兩個屬性可選。
flex-grow屬性定義項目的放大比例,默認為0,即如果存在剩余空間,也不放大。
flex-shrink屬性定義了項目的縮小比例,默認為
flex-basis屬性定義了在分配多余空間之前,項目占據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多余空間。它的默認值為auto,即項目的本來大小。
align-self屬性
align-self屬性允許單個項目有與其他項目不一樣的對齊方式,可覆蓋align-items屬性。默認值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。
有6個可選值:
- auto
- flex-start:交叉軸的起點對齊。
- flex-end:交叉軸的終點對齊。
- center:交叉軸的中點對齊。
- baseline: 項目的第一行文字的基線對齊。
- stretch(默認值):如果項目未設置高度或設為auto,將占滿整個容器的高度。
CSS Flex布局