flex 布局總結

2021-08-28 05:36:32 字數 801 閱讀 6772

flex 容器的屬性

flex-direction: 主軸方向

justify-content: 主軸上 item 的對齊方式

align-items: 交叉軸上 item 的對齊方式

align-content: 多根軸上的對齊方式,若只有一根軸,該屬性則不起作用

flex-wrap: 如何換行

item 屬性

order: 排列順序,數值越小,越靠前

flex-grow: 如果有剩餘空間,item 的放大比例

flex-shrink: 空間不足時,item 的縮小比例

flex-basis: 屬性定義了在分配多餘空間之前,專案佔據的主軸空間(main size)

align-self: 覆蓋容器的 align-items 屬性,指定自身的對齊方式

簡寫

flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式,預設值為row nowrap。

.box

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

.item

該屬性有兩個快捷值:auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性,而不是單獨寫三個分離的屬性,因為瀏覽器會推算相關值。

總結 Flex布局

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

flex布局總結

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

flex布局總結

1 flex api簡介 flex direction 指定方向,預設值row flex wrap 一條軸線排不下,如何換行,值 nowrap 不換行 wrap 第一行在上方 wrap reverse flex flow flex direction flex wrap的縮寫 justify con...