今天就跟大家聊聊有關(guān)flex-shrink屬性怎么在CSS3中使用，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

義馬網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,義馬網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為義馬1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的義馬做網(wǎng)站的公司定做！

在CSS3 Flexbox中flex-shrink屬性定義為:

This <number> component sets &lsquo;flex-shrink&rsquo; longhand and specifies the flex shrink factor, which determines how much the flex item will shrink relative to the rest of the flex items in the flex container when negative free space is distributed. When omitted, it is set to &lsquo;1&rsquo;. The flex shrink factor is multiplied by the flex basis when distributing negative space.

通俗來(lái)講就是當(dāng)flex items的大小超過(guò)了flex container時(shí)， 各個(gè)flex item的壓縮比例， 請(qǐng)看下面的示例:

代碼如下:

<style> 
#container div { 
height: 200px; 
width: 60px; 
} 
#test1 { 
background-color: blue; 
flex-shrink: 1; 
} 
#test2 { 
background-color: yellow; 
flex-shrink: 0.5; 
} 
</style> 
<div id="container"> 
<div id="test1"></div> 
<div id="test2"></div> 
</div>

<div id="test1">與<div id="test2">的寬度總和是120px， 超過(guò)了<div id="container">的寬度100px， 超過(guò)的大小為20px, 那么container為了裝下兩個(gè)子div，兩個(gè)子div的寬度就必須減少20px，那么每個(gè)子div的寬度減少多少呢？ 這個(gè)時(shí)候就需要flex-shrink屬性來(lái)分配了，每個(gè)子div的實(shí)際顯示寬度計(jì)算方法公式為:

實(shí)際值 = 計(jì)劃值 - 總差值 * flex-shrink/(flex-shrink和)

根據(jù)上面的公式我們可以計(jì)算出<div id="test1">與<div id="test2">的實(shí)際寬度值分別為:

代碼如下:

<div id="test1">: width = 60 - 20 * 1 / (1 + 0.5) = 47px 
<div id="test2">: width = 60 - 20 * 0.5 / (1 + 0.5) = 53px

根據(jù)以上結(jié)果可知flex-shrink值越大，flex item的實(shí)際結(jié)果就會(huì)越小

看完上述內(nèi)容，你們對(duì)flex-shrink屬性怎么在CSS3中使用有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

文章標(biāo)題：flex-shrink屬性怎么在CSS3中使用
鏈接URL：http://www.chinadenli.net/article34/gshpse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、企業(yè)建站、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、小程序開發(fā)、定制開發(fā)

廣告

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