flex布局總結

2022-06-11 13:30:08 字數 1099 閱讀 6160

flex-direction(專案的排列方向)

flex-wrap屬性定義,如果一條軸線排不下,如何換行。

flex-flow:flex-direction |flex-wrap

上面兩個的縮寫

justify-content屬性定義了專案在主軸上的對齊方式。

align-items屬性定義專案在主軸的垂直軸上如何對齊。

align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線,該屬性不起作用。

order屬性定義專案的排列順序。數值越小,排列越靠前,預設為0。

flex-grow屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。

flex-shrink屬性定義了專案的縮小比例,預設為1,即如果空間不足,該專案將縮小。

flex-basis屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。它的預設值為auto,即專案的本來大小。

flex屬性是flex-grow,flex-shrinkflex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。

align-self屬性允許單個專案有與其他專案不一樣的對齊方式,可覆蓋align-items屬性。預設值為auto,表示繼承父元素的align-items屬性,如果沒有父元素,則等同於stretch

總結 Flex布局

網頁布局 layout 是 css 的乙個重點應用。布局的傳統解決方案,基於 盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便,比如,垂直居中 就不容易實現。任何乙個容器都可以指定為 flex 布局。行內元素也可以使用 flex 布局。bo...

flex 布局總結

flex 容器的屬性 flex direction 主軸方向 justify content 主軸上 item 的對齊方式 align items 交叉軸上 item 的對齊方式 align content 多根軸上的對齊方式,若只有一根軸,該屬性則不起作用 flex wrap 如何換行item 屬...

flex布局總結

以下6屬性設定在容器上 1.flex direction 決定主軸方向 2.flex warp 決定一排放不下,如何換行 3.flex flaw 1和2兩屬性的合併寫法 4.justify content 定義專案在主軸上的對齊方式 5.align items 定義專案在交叉軸的對齊方式 6.ali...