CSS 中flex - grow、flex - shrink和flex - basis屬性的含義及它們在彈性盒布局中的協同作用。

大白話CSS 中flex - grow、flex - shrink和flex - basis屬性的含義及它們在彈性盒布局中的協同作用。

在 CSS 的彈性盒布局（Flexbox）里，flex-grow、flex-shrink 和 flex-basis 這三個屬性對彈性元素的尺寸和伸縮性起著關鍵作用。下面為你詳細解釋這些屬性的含義以及它們之間的協同作用。

各屬性含義

  • flex-basis：此屬性用于設定彈性元素的初始大小。可以把它看作是彈性元素在伸縮之前的“基礎尺寸”。它能使用像 px、em 這類的固定單位，也可以用百分比或者 auto 來表示。若設置為 auto，元素的初始大小就會依據其內容來確定。
  • flex-grow：這個屬性用來規定彈性元素在有多余空間時的擴展比例。它是一個無單位的數值，默認值為 0，這意味著元素不會主動擴展以填滿多余空間。若設置為大于 0 的值，元素就會按比例擴展。例如，有兩個元素，一個 flex-grow 為 1，另一個為 2，那么后者擴展的空間會是前者的兩倍。
  • flex-shrink：該屬性用于規定彈性元素在空間不足時的收縮比例。同樣是無單位的數值，默認值為 1，表示元素會按照比例收縮。若設置為 0，元素就不會收縮。

代碼示例及解釋

以下是一個包含詳細注釋的代碼示例，展示了這三個屬性的協同作用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>/* 設置彈性容器 */.flex-container {display: flex; /* 將元素設置為彈性容器 */width: 600px; /* 容器寬度為 600px */border: 1px solid black; /* 為容器添加黑色邊框 */}/* 第一個彈性元素 */.flex-item1 {flex-basis: 100px; /* 初始大小為 100px */flex-grow: 1; /* 擴展比例為 1 */flex-shrink: 1; /* 收縮比例為 1 */background-color: lightblue; /* 背景顏色為淺藍色 */}/* 第二個彈性元素 */.flex-item2 {flex-basis: 200px; /* 初始大小為 200px */flex-grow: 2; /* 擴展比例為 2 */flex-shrink: 2; /* 收縮比例為 2 */background-color: lightgreen; /* 背景顏色為淺綠色 */}/* 第三個彈性元素 */.flex-item3 {flex-basis: 300px; /* 初始大小為 300px */flex-grow: 0; /* 不擴展 */flex-shrink: 0; /* 不收縮 */background-color: lightcoral; /* 背景顏色為淺珊瑚色 */}</style>
</head><body><!-- 創建彈性容器 --><div class="flex-container"><!-- 第一個彈性元素 --><div class="flex-item1">Item 1</div><!-- 第二個彈性元素 --><div class="flex-item2">Item 2</div><!-- 第三個彈性元素 --><div class="flex-item3">Item 3</div></div>
</body></html>

代碼解釋

  • HTML 部分：構建了一個彈性容器 div，其類名為 flex-container，里面包含三個彈性元素 div，類名分別為 flex-item1、flex-item2 和 flex-item3。
  • CSS 部分：
    • .flex-container：把 display 屬性設為 flex，將該元素變為彈性容器，寬度設為 600px 并添加黑色邊框。
    • .flex-item1：初始大小是 100px，擴展比例為 1，收縮比例為 1，背景顏色為淺藍色。
    • .flex-item2：初始大小是 200px，擴展比例為 2，收縮比例為 2，背景顏色為淺綠色。
    • .flex-item3：初始大小是 300px，擴展比例為 0，即不擴展，收縮比例為 0，即不收縮，背景顏色為淺珊瑚色。

協同作用

  • 空間充足時：若容器寬度大于所有彈性元素的 flex-basis 之和，多余空間會按照 flex-grow 的比例分配給各元素。例如，上述示例中，若容器寬度大于 600px，多余空間會按 1:2:0 的比例分配給三個元素。
  • 空間不足時：若容器寬度小于所有彈性元素的 flex-basis 之和，元素會按照 flex-shrink 的比例收縮。不過，flex-item3 的 flex-shrink 為 0，所以它不會收縮。

通過合理運用 flex-grow、flex-shrink 和 flex-basis 這三個屬性，你就能精準控制彈性元素在不同空間條件下的尺寸和伸縮性。

flex-grow、flex-shrink和flex-basis屬性在不同的瀏覽器中的兼容性如何？

flex-grow、flex-shrink 和 flex-basis 這些屬性都屬于 CSS Flexbox 布局模塊的一部分。當前，它們在主流瀏覽器中擁有良好的兼容性，但在舊版本瀏覽器里可能存在一些問題。下面是這些屬性在不同瀏覽器中的兼容性情況：

桌面瀏覽器

  • Chrome：從 Chrome 21 版本起就開始支持這些屬性，當前最新版本對其支持良好。
  • Firefox：從 Firefox 22 版本起支持，當前版本支持完善。
  • Safari：從 Safari 6.1 版本起支持，但在舊版本中需要添加 -webkit- 前綴。比如，flex-grow 要寫成 -webkit-flex-grow。
  • Opera：從 Opera 12.1 版本起支持，現在支持情況良好。
  • Edge：從 Edge 12 版本起支持，當前版本兼容性沒問題。
  • Internet Explorer：IE 10 部分支持，使用時需要添加 -ms- 前綴，且實現方式與標準有所不同；IE 11 對其支持較好，但在某些復雜布局下可能會有問題。

移動瀏覽器

  • Chrome for Android：支持情況良好，從早期版本就開始支持。
  • Firefox for Android：支持完善，兼容性佳。
  • Safari on iOS：從 iOS 7 起支持，舊版本需 -webkit- 前綴。
  • Samsung Internet：支持良好，無明顯兼容性問題。

兼容性處理建議

  • 使用前綴：為了確保在舊版瀏覽器中的兼容性，可以添加瀏覽器前綴。示例如下：
.flex-item {-webkit-flex-grow: 1; /* Safari 6.1+ */-ms-flex-grow: 1; /* IE 10 */flex-grow: 1;-webkit-flex-shrink: 1; /* Safari 6.1+ */-ms-flex-shrink: 1; /* IE 10 */flex-shrink: 1;-webkit-flex-basis: 200px; /* Safari 6.1+ */-ms-flex-basis: 200px; /* IE 10 */flex-basis: 200px;
}
  • 使用 Autoprefixer：這是一個自動添加瀏覽器前綴的工具，可集成到構建工具（如 Webpack、Gulp 等）中，這樣在編寫 CSS 時就無需手動添加前綴。
  • 漸進增強：先為現代瀏覽器構建完整的 Flexbox 布局，再為舊版瀏覽器提供基本的布局方案，以此保證所有用戶都能獲得可用的體驗。

總的來說，在開發中使用 flex-grow、flex-shrink 和 flex-basis 時，只要處理好舊版瀏覽器的兼容性問題，就能在大多數瀏覽器中實現一致的布局效果。

如何檢測瀏覽器對這些屬性的支持情況？

在前端開發中，檢測瀏覽器對 flex-grow、flex-shrink 和 flex-basis 屬性的支持情況，可通過以下幾種方法實現：

1. 使用 Modernizr 庫

Modernizr 是一個用于檢測瀏覽器特性支持情況的 JavaScript 庫。它會自動檢測瀏覽器是否支持各種 HTML5 和 CSS3 特性，其中就包含 Flexbox 相關屬性。

步驟：
  1. 引入 Modernizr 庫：你可以從 Modernizr 官網 下載該庫，或者使用 CDN 引入。
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
  1. 檢測 Flexbox 支持情況：在頁面加載完成后，Modernizr 會在 <html> 標簽上添加相應的類名，以此表明瀏覽器對某個特性的支持情況。若支持 Flexbox，<html> 標簽會添加 flexbox 類；若不支持，則添加 no-flexbox 類。
<!DOCTYPE html>
<html>
<head><script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script><style>/* 若支持 Flexbox，應用這些樣式 */.flexbox .flex-container {display: flex;}/* 若不支持 Flexbox，應用這些樣式 */.no-flexbox .flex-container {/* 提供替代布局方案 */}</style>
</head>
<body><div class="flex-container"><!-- 彈性元素 --></div>
</body>
</html>

2. 使用 JavaScript 進行特性檢測

你可以通過創建一個臨時的 DOM 元素，為其設置相關的 CSS 屬性，然后檢查這些屬性是否被正確應用，以此來檢測瀏覽器對某個屬性的支持情況。

function isPropertySupported(property) {const element = document.createElement('div');if (property in element.style) {return true;}const propertyName = property.charAt(0).toUpperCase() + property.slice(1);const vendorPrefixes = ['Webkit', 'Moz', 'ms', 'O'];for (let i = 0; i < vendorPrefixes.length; i++) {if ((vendorPrefixes[i] + propertyName) in element.style) {return true;}}return false;
}// 檢測 flex-grow 支持情況
const isFlexGrowSupported = isPropertySupported('flexGrow');
// 檢測 flex-shrink 支持情況
const isFlexShrinkSupported = isPropertySupported('flexShrink');
// 檢測 flex-basis 支持情況
const isFlexBasisSupported = isPropertySupported('flexBasis');console.log('flex-grow supported:', isFlexGrowSupported);
console.log('flex-shrink supported:', isFlexShrinkSupported);
console.log('flex-basis supported:', isFlexBasisSupported);

3. 使用 CSS @supports 規則

@supports 是 CSS 中的一個特性查詢規則，用于檢測瀏覽器是否支持某個 CSS 屬性或值。

@supports (flex-grow: 1) {/* 若支持 flex-grow，應用這些樣式 */.flex-container {display: flex;}
}@supports not (flex-grow: 1) {/* 若不支持 flex-grow，應用這些樣式 */.flex-container {/* 提供替代布局方案 */}
}

你可以依據項目的實際需求和兼容性要求，選擇合適的檢測方法。若項目需要兼容多種特性，使用 Modernizr 庫會比較方便；若僅需檢測少數幾個屬性，使用 JavaScript 或 CSS @supports 規則會更合適。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/73054.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/73054.shtml
英文地址，請注明出處：http://en.pswp.cn/web/73054.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

OpenGL ES -＞乒乓緩沖，計算只用兩個幀緩沖對象(Frame Buffer Object)+疊加多個濾鏡作用后的Bitmap

OpenGL ES -＞乒乓緩沖，計算只用兩個幀緩沖對象(Frame Buffer Object)+疊加多個濾鏡作用后的Bitmap

乒乓緩沖核心思想 不使用乒乓緩沖&#xff0c;如果要每個濾鏡作用下的繪制內容&#xff0c;也就是這個濾鏡作用下的幀緩沖&#xff0c;需要創建一個Frame Buffer Object加上對應的Frame Buffer Object Texture使用乒乓緩沖&#xff0c;只用兩個Frame Buffer Object加上對應的F…
閱讀更多...
【HarmonyOS NEXT】關鍵資產存儲開發案例

【HarmonyOS NEXT】關鍵資產存儲開發案例

在 iOS 開發中 Keychain 是一個非常安全的存儲系統&#xff0c;用于保存敏感信息&#xff0c;如密碼、證書、密鑰等。與文件系統不同&#xff0c;Keychain 提供了更高的安全性&#xff0c;因為它對數據進行了加密&#xff0c;并且只有經過授權的應用程序才能訪問存儲的數據。那…
閱讀更多...
ccfcsp1901線性分類器

ccfcsp1901線性分類器

//線性分類器 #include<iostream> using namespace std; int main(){int n,m;cin>>n>>m;int x[1000],y[1000];char z[1000];for(int i0;i<n;i){cin>>x[i]>>y[i];cin>>z[i];}int a[20],b[20],c[20];for(int i0;i<m;i){cin>>a[i…
閱讀更多...
Spring Boot 整合 OpenFeign 教程

Spring Boot 整合 OpenFeign 教程

精心整理了最新的面試資料和簡歷模板&#xff0c;有需要的可以自行獲取 點擊前往百度網盤獲取 點擊前往夸克網盤獲取 Spring Boot 整合 OpenFeign 教程 一、OpenFeign 簡介 OpenFeign 是 Netflix 開源的聲明式 HTTP 客戶端&#xff0c;通過接口和注解簡化服務間 HTTP 調用。…
閱讀更多...
APM 仿真遙控指南

APM 仿真遙控指南

地面站開發了一段時間了&#xff0c;由于沒有硬件&#xff0c;所以一直在 APM 模擬器中驗證。我們已經實現了 MAVLink 消息接收和解析&#xff0c;顯示無人機狀態&#xff0c;給無人機發送消息&#xff0c;實現一鍵起飛&#xff0c;飛往指定地點&#xff0c;降落&#xff0c;返…
閱讀更多...
C語言入門教程100講（4）輸入輸出

C語言入門教程100講（4）輸入輸出

文章目錄 1. 什么是輸入輸出&#xff1f;2. 標準輸入輸出函數2.1 printf 函數2.2 scanf 函數 3. 格式化占位符4. 示例代碼代碼解析&#xff1a;輸出結果&#xff1a; 5. 常見問題問題 1&#xff1a;scanf 中的 & 是什么作用&#xff1f;問題 2&#xff1a;printf 和 scanf …
閱讀更多...
《信息系統安全》（第一次上機實驗報告）

《信息系統安全》（第一次上機實驗報告）

實驗一 &#xff1a;網絡協議分析工具Wireshark 一 實驗目的 學習使用網絡協議分析工具Wireshark的方法&#xff0c;并用它來分析一些協議。 二實驗原理 TCP/IP協議族中網絡層、傳輸層、應用層相關重要協議原理。網絡協議分析工具Wireshark的工作原理和基本使用規則。 三 實…
閱讀更多...
城市街拍人像自拍電影風格Lr調色教程，手機濾鏡PS+Lightroom預設下載！

城市街拍人像自拍電影風格Lr調色教程，手機濾鏡PS+Lightroom預設下載！

調色教程 城市街拍人像自拍的電影風格 Lr 調色&#xff0c;是利用 Adobe Lightroom 軟件&#xff0c;對在城市街景中拍攝的人像自拍照片進行后期處理&#xff0c;使其呈現出電影畫面般獨特的視覺質感與藝術氛圍。通過一系列調色操作&#xff0c;改變照片的色彩、明暗、對比等元…
閱讀更多...
自學Python創建強大AI：從入門到實現DeepSeek級別的AI

自學Python創建強大AI：從入門到實現DeepSeek級別的AI

人工智能&#xff08;AI&#xff09;是當今科技領域最熱門的方向之一&#xff0c;而Python是AI開發的首選語言。無論是機器學習、深度學習還是自然語言處理&#xff0c;Python都提供了豐富的庫和工具。如果你夢想創建一個像DeepSeek這樣強大的AI系統&#xff0c;本文將為你提供…
閱讀更多...
Mac | Excel | 列數改為和行數一樣用數字表示

Mac | Excel | 列數改為和行數一樣用數字表示

2. 3.
閱讀更多...
Qt/C++項目積累：4.遠程升級工具 - 4.1 項目設想

Qt/C++項目積累：4.遠程升級工具 - 4.1 項目設想

背景&#xff1a; 桌面程序一般都支持遠程升級&#xff0c;也是比較常用的場景設計。如酷狗音樂的升級&#xff0c;會提供兩個選項&#xff0c;自動幫助安裝或是新版本提醒&#xff0c;由用戶來決定是否升級&#xff0c;都屬于遠程升級的應用及策略。 看看經過這塊的功能了解及…
閱讀更多...
（一）丶Windows安裝RabbitMQ可能會遇到的問題

（一）丶Windows安裝RabbitMQ可能會遇到的問題

一丶可能會忘了配置ERLang的環境變量 二丶執行命令時報錯 第一步 rabbitmq-plugins enable rabbitmq_management 第二部 rabbitmqctl status 三丶修改.erlang.cookie 文件 1.找到C盤目下的.erlang.cookie文件 C:\Users\admin\.erlang.cookie C:\Windows\System32\config\sys…
閱讀更多...
Amdahl 定律

Amdahl 定律

Amdahl 定律是用來表示&#xff0c;當提高系統某部分性能時對整個系統的影響&#xff0c;其公式如下&#xff1a; a表示我們提升部分初始耗時比例&#xff0c;k是我們的提升倍率&#xff0c;通過這個公式我們可以輕松的得知對每一部分的提醒&#xff0c;對整個系統帶來的影響…
閱讀更多...
HW華為流程管理體系精髓提煉華為流程運營體系（124頁PPT）（文末有下載方式）

HW華為流程管理體系精髓提煉華為流程運營體系（124頁PPT）（文末有下載方式）

資料解讀&#xff1a;HW華為流程管理體系精髓提煉華為流程運營體系&#xff08;124頁PPT&#xff09; 詳細資料請看本解讀文章的最后內容。 華為作為全球領先的科技公司&#xff0c;其流程管理體系的構建與運營是其成功的關鍵之一。本文將從華為流程管理體系的核心理念、構建…
閱讀更多...
Powershell WSL導出導入ubuntu22.04.5子系統

Powershell WSL導出導入ubuntu22.04.5子系統

導出Linux子系統 導出位置在C盤下，根據自己的實際情況更改即可Write-Host "export ubuntu22.04.5" -ForegroundColor Green wsl --export Ubuntu-22.04 c:\Ubuntu-22.04.tar 導入Linux子系統 好處是目錄可用在任意磁盤路徑，便于遷移不同的設備之間Write-Host &quo…
閱讀更多...
【Attention】SKAttention

【Attention】SKAttention

SKAttention選擇核注意力 標題&#xff1a;SKAttention 期刊&#xff1a;IEEE2019 代碼&#xff1a; https://github.com/implus/SKNet 簡介&#xff1a; 動機:增大感受野來提升性能、多尺度信息聚合方式解決的問題&#xff1a;自適應調整感受野大小創新性:提出選擇性內核…
閱讀更多...
解決Popwindow寬高的問題。

解決Popwindow寬高的問題。

問題 在使用Popwindow進行自定義的過程中&#xff0c;需要設置popwindow的寬高。但是寬高很多時候容易出問題。比如下面的例子。 布局文件如下 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas.andr…
閱讀更多...
MySQL數據庫精研之旅第二期：庫操作的深度探索

MySQL數據庫精研之旅第二期：庫操作的深度探索

專欄&#xff1a;MySQL數據庫成長記 個人主頁&#xff1a;手握風云 目錄 一、查看數據庫 二、創建數據庫 2.1. 語法 2.2. 示例 三、字符集編碼和校驗(排序)規則 3.1. 查看數據庫支持的字符集編碼 3.2. 查看數據庫支持的排序規則 3.3. 不同的字串集與排序規則對數據庫的…
閱讀更多...
基于deepseek的智能語音客服【第四講】封裝milvus數據庫連接池封裝

基于deepseek的智能語音客服【第四講】封裝milvus數據庫連接池封裝

通過工廠模式創建鏈接 static {// 創建連接池工廠BasePooledObjectFactory<MilvusServiceClient> factory new BasePooledObjectFactory<MilvusServiceClient>() {Overridepublic MilvusServiceClient create() throws Exception {return new MilvusServiceClient…
閱讀更多...
STM32基礎教程——定時器

STM32基礎教程——定時器

前言 TIM定時器&#xff08;Timer&#xff09;:STM32的TIM定時器是一種功能強大的外設模塊&#xff0c;通過時基單元&#xff08;包含預分頻器、計數器和自動重載寄存器&#xff09;實現精準定時和計數功能。其核心原理是&#xff1a;內部時鐘&#xff08;CK_INT&#xff09;或…
閱讀更多...
最新文章

Copyright @ 2022~2023