CSS中flex-grow屬性的用法詳解（附代碼）

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 16:50:24

CSS中flex-grow屬性的用法詳解（附代碼）

CSS中flex-grow屬性的用法詳解（附代碼）:本篇文章我們將使用Flexbox中的flex-grow屬性來實(shí)現(xiàn)當(dāng)框架的寬度包裝并且變得大于不必要的寬度時(shí)加寬框架寬度時(shí)的行為。使用flex-grow屬性指定當(dāng)Flexbox中的框架寬度大于不必要的寬度時(shí)框架寬度的寬度。語法：flex-grow :(數(shù)量）代碼示例：flex-g

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀CSS中flex-grow屬性的用法詳解（附代碼）:本篇文章我們將使用Flexbox中的flex-grow屬性來實(shí)現(xiàn)當(dāng)框架的寬度包裝并且變得大于不必要的寬度時(shí)加寬框架寬度時(shí)的行為。使用flex-grow屬性指定當(dāng)Flexbox中的框架寬度大于不必要的寬度時(shí)框架寬度的寬度。語法：flex-grow :(數(shù)量）代碼示例：flex-g

本篇文章我們將使用Flexbox中的flex-grow屬性來實(shí)現(xiàn)當(dāng)框架的寬度包裝并且變得大于不必要的寬度時(shí)加寬框架寬度時(shí)的行為。

使用flex-grow屬性指定當(dāng)Flexbox中的框架寬度大于不必要的寬度時(shí)框架寬度的寬度。

語法：

flex-grow :(數(shù)量）

代碼示例：

flex-grow.html

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" /> 
<title></title> 
<link rel="stylesheet" href="flex-grow.css" />
</head>
<body> 
<div class="container">
 <div class="frameA">第一個內(nèi)容<br/>Gxl網(wǎng)<br />Gxl網(wǎng)</div>
 <div class="frameB">第二個內(nèi)容<br />Gxl網(wǎng)<br /></div>
 <div class="frameC">第三個內(nèi)容<br />Gxl網(wǎng)<br />Gxl網(wǎng)</div>
 <div class="frameD">第四個內(nèi)容<br />Gxl網(wǎng)<br />Gxl網(wǎng)</div>
 <div class="frameE">第五個內(nèi)容<br />Gxl網(wǎng)<br />Gxl網(wǎng)</div>
 </div>
</body>
</html>

flex-grow.css

.container {
 display: flex;
}
.frameA {
 border: 1px solid #e9006b;
 flex-grow: 5;
}
.frameB {
 border: 1px solid #ff6a00;
 flex-grow: 4;
}
.frameC {
 border: 1px solid #d0b106;
 flex-grow: 3;
}
.frameD {
 border: 1px solid #4aae20;
 flex-grow: 2;
}
.frameE {
 border: 1px solid #01b9b3;
 flex-grow: 1;
}

說明：

我們將frame-A flex-grow設(shè)置為5，frame B flex-grow to 4，frame C flex-grow 3，frame D flex-2 to frameE flex-grow 1。使用此設(shè)置，即使框架的寬度變得寬于顯示文本所需的寬度，框架的寬度也會進(jìn)一步擴(kuò)大。在這種情況下，幀的延伸程度，frameA：frameB：frame C：frame D：frameE = 5：4：3：2：1的比率擴(kuò)展

顯示結(jié)果

使用Web瀏覽器顯示上述HTML文件。將顯示如下所示的屏幕。當(dāng)窗口寬度較窄時(shí)，每個幀都以相同的寬度顯示。

360截圖20181109092627824.jpg

增加窗口寬度。在需要包裝以在框架中顯示文本的狀態(tài)下，框架的寬度仍然以相同的寬度顯示。

360截圖20181109092522184.jpg

在框內(nèi)的文本顯示不需要的寬度時(shí)，以相同的寬度顯示。

360截圖20181109092914398.jpg

如果將窗口大小加寬到超出顯示框架而不包裝文本所需的寬度，則每個框架的大小會擴(kuò)大。幀大小增加是frameA：frameB：frameC：frameD：frameE = 5：4：3：2：1比率。

360截圖20181109093019823.jpg

只在一個框中設(shè)置flex-grow屬性

將CSS代碼更改為以下內(nèi)容并僅設(shè)置一個flex-grow屬性。

flex-grow.css

.container {
 display: flex;
}
.frameA {
 border: 1px solid #e9006b;
 flex-grow: 1;
}
.frameB {
 border: 1px solid #ff6a00;
}
.frameC {
 border: 1px solid #d0b106;
}

.frameD {
 border: 1px solid #4aae20;
}
.frameE {
 border: 1px solid #01b9b3;
}

使用Web瀏覽器顯示頁面。當(dāng)窗口寬度較窄時(shí)，顯示的幀寬度與前一種情況相同。

360截圖20181109093849410.jpg