css中flex-grow屬性的使用方法-創(chuàng)新互聯(lián)

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

成都創(chuàng)新互聯(lián)成立以來不斷整合自身及行業(yè)資源、不斷突破觀念以使企業(yè)策略得到完善和成熟，建立了一套“以技術(shù)為基點，以客戶需求中心、市場為導向”的快速反應(yīng)體系。對公司的主營項目，如中高端企業(yè)網(wǎng)站企劃 / 設(shè)計、行業(yè) / 企業(yè)門戶設(shè)計推廣、行業(yè)門戶平臺運營、成都app軟件開發(fā)、手機網(wǎng)站制作設(shè)計、微信網(wǎng)站制作、軟件開發(fā)、移動服務(wù)器托管等實行標準化操作，讓客戶可以直觀的預(yù)知到從成都創(chuàng)新互聯(lián)可以獲得的服務(wù)效果。

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

css flex-grow屬性怎么用？

定義和用法

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

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

默認值： 0

繼承： 否

可動畫化： 是。

版本： CSS3

JavaScript 語法： 

object.style.flexGrow="5"

CSS 語法：

flex-grow: number|initial|inherit;

屬性值

number 一個數(shù)字，規(guī)定項目將相對于其他靈活的項目進行擴展的量。默認值是 0。

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

inherit 從父元素繼承該屬性。

實例

讓第二個元素的寬度為其他元素的三倍：

<!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 及更新版本通過 -webkit-flex-grow 屬性支持該屬性。</p>

</body>
</html>

效果：


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

看完了這篇文章，相信你對css中flex-grow屬性的使用方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享題目：css中flex-grow屬性的使用方法-創(chuàng)新互聯(lián)
本文URL：http://muchs.cn/article36/dpgcpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、網(wǎng)站改版、網(wǎng)站建設(shè)、定制網(wǎng)站、營銷型網(wǎng)站建設(shè)、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

營銷型網(wǎng)站建設(shè)