淺談CSS3中的部分屬性——flex佈局
阿新 • • 發佈:2019-01-01
display:Flex
簡介:
- flex是Flexible Box的縮寫,即“彈性佈局”
- 設定display:flex;屬性後,子元素的float,clear和vertical-align屬性將不再起作用
- 此屬性既適用於塊級元素也適用於行內元素
概念
display屬性為flex的元素稱為容器,其所有子元素則為容器成員,稱為flex item(flex專案)。
容器預設有x,y兩條軸:水平的稱為主軸(main axis),豎直的稱為交叉軸(cross axis),其餘詳細資訊我們用一幅圖來演示
- 瞭解了這些之後我們看一下flex的一些子屬性:
- flex-direction 容器內專案的排列方向(預設橫向排列)
- flex-wrap 容器內專案換行方式
- flex-flow 以上兩個屬性的簡寫方式
- justify-content 專案在主軸上的對齊方式
- align-items 專案在交叉軸上如何對齊
- align-content 定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用
接下來我們對這些屬性做一個詳細的介紹
-
flex-direction:
- row(預設)沿水平主軸由左向右排列
- row-reverse沿水平主軸由右向左排列
- column沿垂直主軸由上到下
- column-reverse沿垂直主軸由下到上
-
flex-warp:
- nowrap(預設):不換行
- wrap:換行,第一行在上方
- wrap-reverse:換行,第一行在下方
-
flex-flow:
- flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap
- flex-flow: ||
-
justify-content:
- 話不多說上圖
- 話不多說上圖
-
align-items:
- flex-start:交叉軸的起點對齊。
- flex-end:交叉軸的終點對齊。
- center:交叉軸的中點對齊。
- baseline: 專案的第一行文字的基線對齊。
- stretch(預設值):如果專案未設定高度或設為auto,將佔滿整個容器的高度。
-
align-content:
- flex-start:與交叉軸的起點對齊。
- flex-end:與交叉軸的終點對齊。
- center:與交叉軸的中點對齊。
- space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈。
- space-around:每根軸線兩側的間隔都相等。所以,軸線之間的間隔比軸線與邊框的間隔大一倍。
- stretch(預設值):軸線佔滿整個交叉軸。
當然了,專案(子元素)同樣也有屬性
- order:
- order屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。
- order屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。
- flex-grow:
- flex-grow屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大
- flex-grow屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大
- flex-shrink
- flex-shrink屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
如果所有專案的flex-shrink屬性都為1,當空間不足時,都將等比例縮小。如果一個專案的flex-shrink屬性為0,其他專案都為1,則空間不足時,前者不縮小。
- flex-shrink屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。
負值對該屬性無效。
- flex-basis
- flex-basis屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。
- 它可以設為跟width或height屬性一樣的值(比如350px),則專案將佔據固定空間
.item {
flex-basis: <length> | auto; /* default auto */
}
- flex屬性
- flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選
- 該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。
- 建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因為瀏覽器會推算相關值。
- align-self:
- align-self屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch。