學習筆記 HTML5中的FLEX布局

2021-10-10 14:39:11 字數 1965 閱讀 3888

子元素屬性

2023年,w3c 提出了一種新的方案----flex 布局,可以簡便、完整、響應式地實現各種頁面布局。目前,它已經得到了所有瀏覽器的支援,這意味著,現在就能很安全地使用這項功能。

該屬性規定了將此元素作為乙個flex容器,其中的子元素預設轉化為flex專案

決定主軸的方向

定義如何換行

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

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

具體對齊的方式與主軸相關

align-items屬性定義專案在交叉軸(輔軸)上如何對齊。

設定或檢索彈性盒堆疊伸縮行的對齊方式

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

預設情況下flex order會按照書寫順訓呈現,可以通過order屬性改變,數值小的在前面,還可以是負數

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

設定或檢索彈性盒的擴充套件比率,根據彈性盒子元素所設定的擴充套件因子作為比率來分配剩餘空間

如果所有專案的flex-grow屬性都為1,則它們將等分剩餘空間(如果有的話)。如果乙個專案的flex-grow屬性為2,其他專案都為1,則前者佔據的剩餘空間將比其他項多一倍。

設定或檢索彈性盒的收縮比率,根據彈性盒子元素所設定的收縮因子作為比率來收縮空間

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

設定或檢索彈性盒伸縮基準值,如果所有子元素的基準值之和大於剩餘空間,則會根據每項設定的基準值,按比率伸縮剩餘空間

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

.item

它可以設為跟widthheight屬性一樣的值(比如350px),則專案將佔據固定空間。

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

也是子專案所佔的分數,如果左右大小都固定了,則flex:1會填充滿中間

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

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

HTML5學習筆記一 簡單學習HTML5

html 是用來描述網頁的一種語言。html5 是下一代 html 標準。html html 4.01的上乙個版本誕生於 1999 年。自從那以後,web 世界已經經歷了巨變。html5 仍處於完善之中。然而,大部分現代瀏覽器已經具備了某些 html5 支援。html5 中的一些有趣的新特性 看一下...

html5學習筆記

html5 1 文件宣告dtd 設定文件型別 使得瀏覽器按照標準模式 w3c標準 渲染網頁 否則瀏覽器按照自定義的怪異模式渲染網頁 2 結構標籤 本質上都是div標籤,但是有意義,3 canvas 凡是路徑圖形,開始畫之前要beginpath 畫完要closepath 定義縮寫 the prc wa...