CSS3 Flexbox中flex-shrink屬性的用法示例介紹
發(fā)布時(shí)間：2013-12-30 11:40:29 作者：佚名 
我要評(píng)論
我要評(píng)論當(dāng)flex items的大小超過(guò)了flex container時(shí)， 各個(gè)flex item的壓縮比例，下面有個(gè)不錯(cuò)的教程，大家可以參考下
在CSS3 Flexbox中flex-shrink屬性定義為:
This <number> component sets ‘flex-shrink’ 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 ‘1’. 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ì)越小
This <number> component sets ‘flex-shrink’ 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 ‘1’. 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)看下面的示例:
復(fù)制代碼
代碼如下:<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í)際寬度值分別為:
復(fù)制代碼
代碼如下:<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ì)越小
相關(guān)文章
利用CSS3的flexbox實(shí)現(xiàn)水平垂直居中與三列等高布局
這篇文章給大家介紹了三個(gè)小節(jié)的內(nèi)容，其中包括關(guān)于css3中flexbox需要掌握的概念、flexbox實(shí)現(xiàn)水平垂直居中對(duì)齊和三列等高自適應(yīng)頁(yè)腳區(qū)域黏附底部的布局，有需要的可以參考2016-09-12CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問(wèn)題講解
骰子布局顧名思義,就是好比骰子的一面最多可以放置9個(gè)點(diǎn),而每個(gè)面放置的點(diǎn)數(shù)正好就是一個(gè)布局的模型圖,這里我們就帶來(lái)CSS3的Flexbox骰子布局的實(shí)現(xiàn)及問(wèn)題講解:2016-06-27基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例
這篇文章主要介紹了基礎(chǔ)的CSS3彈性盒Flexbox布局使用實(shí)例,文中最后也提到了解決兼容性問(wèn)題的基本方法,需要的朋友可以參考下2016-04-08CSS3的Flexbox布局的簡(jiǎn)明入門(mén)指南
這篇文章主要介紹了CSS3的Flexbox布局的簡(jiǎn)明入門(mén)指南,Flexbox在"布局界"可謂風(fēng)光無(wú)限,近來(lái)Facebook開(kāi)源的React Native也采用Flexbox來(lái)布局,需要的朋友可以參考下2016-04-08- 今天剛學(xué)了css3的彈性盒模型，這是一個(gè)可以讓你告別浮動(dòng)、完美實(shí)現(xiàn)垂直水平居中的新特性。本文主要是總結(jié)一下今天所學(xué)，有需要的朋友可以參考下2014-10-08
這篇文章主要介紹了10分鐘理解CSS3 FlexBox彈性布局的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-20
