溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

css中flex-grow屬性的使用方法

發(fā)布時(shí)間：2020-09-24 11:06:56 來(lái)源：億速云 閱讀：288 作者：小新 欄目：web開(kāi)發(fā)

小編給大家分享一下css中flex-grow屬性的使用方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

css flex-grow屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率，CSS語(yǔ)法是flex-grow: number|initial|inherit;如果元素不是彈性盒對(duì)象的元素，則flex-grow屬性不起作用。

css flex-grow屬性怎么用？

定義和用法

flex-grow 屬性用于設(shè)置或檢索彈性盒子的擴(kuò)展比率。

注意：如果元素不是彈性盒對(duì)象的元素，則 flex-grow 屬性不起作用。

默認(rèn)值： 0

繼承： 否

可動(dòng)畫(huà)化： 是。

版本： CSS3

JavaScript 語(yǔ)法： 

object.style.flexGrow="5"

CSS 語(yǔ)法：

flex-grow: number|initial|inherit;

屬性值

number 一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。默認(rèn)值是 0。

initial 設(shè)置該屬性為它的默認(rèn)值。

inherit 從父元素繼承該屬性。

實(shí)例

讓第二個(gè)元素的寬度為其他元素的三倍：

<!DOCTYPE html>
<html>
<head>
<style> 
#main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}

#main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;}

</style>
</head>
<body>

<div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
</div>

<p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 flex-grow 屬性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通過(guò) -webkit-flex-grow 屬性支持該屬性。</p>

</body>
</html>

效果：

css中flex-grow屬性的使用方法

看完了這篇文章，相信你對(duì)css中flex-grow屬性的使用方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手