深入理解前端 flex屬性

2021-09-24 09:21:11 字數 743 閱讀 8954

1、flex-grow屬性

該屬性定義專案的放大比例,預設是0,即如果存在剩餘空間,也不放大;

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

2、flex-shrink 屬性

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

.item
3、flex-basis屬性

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

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

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

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

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

前端概念深入理解

1 所有的前台 其實都是傳送請求,也就是拼接基於http協議的字串,發給伺服器 2 所有的後台 其實最終目的也是拼接好字串返回給前台,後台返回的資訊包括兩部分,頭資訊一般伺服器就會幫我們寫好,主體部分就是需要我們返回的資料 session技術是基於cookie的,底層還是使用了cookie,最大的乙...

深入理解border屬性

定義 border thin,medium 預設值 thick 其他條件 border不支援百分比 border不會隨著裝置的放大縮小而改變 例項ie7 ie8實現圓角效果.parent parent childie7 ie8繪製列表 三 圖形divborder color 與圖形變色.parent...

深入理解C語言 深入理解指標

關於指標,其是c語言的重點,c語言學的好壞,其實就是指標學的好壞。其實指標並不複雜,學習指標,要正確的理解指標。指標也是一種變數,占有記憶體空間,用來儲存記憶體位址 指標就是告訴編譯器,開闢4個位元組的儲存空間 32位系統 無論是幾級指標都是一樣的 p操作記憶體 在指標宣告時,號表示所宣告的變數為指...