這篇文章將為大家詳細(xì)講解有關(guān)css中如何實(shí)現(xiàn)Flex布局的可伸縮性，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司專注于企業(yè)營(yíng)銷型網(wǎng)站、網(wǎng)站重做改版、未央網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、成都商城網(wǎng)站開(kāi)發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為未央等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

Flexibility

Flex伸縮布局決定性的特性是讓伸縮項(xiàng)目可伸縮，也就是讓伸縮項(xiàng)目的寬度或高度自動(dòng)填充剩余的空間。這可以以flex屬性完成。一個(gè)伸縮容器會(huì)等比地按照各伸縮項(xiàng)目的 擴(kuò)展比率 分配剩余空間，也會(huì)按照 收縮比率 縮小各項(xiàng)目以避免溢出。

Flex屬性

flex屬性可用來(lái)指定 可伸縮長(zhǎng)度 的部件：擴(kuò)展比率，收縮比率，伸縮基準(zhǔn)線。當(dāng)有一個(gè)元素是伸項(xiàng)目時(shí)，flex屬性將代替主軸長(zhǎng)度屬性決定元素的主軸長(zhǎng)度。若元素不是伸縮項(xiàng)目，則flex屬性不生效。

flex 是 flex-grow、flex-shrink、flex-basis的縮寫(xiě)

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

1. <'flex-grow'> 取值為 <number> ，用來(lái)指定項(xiàng)目的擴(kuò)展比率；若在flex縮寫(xiě)省略了此屬性值，則flex-grow的指定值是 1；

2. <'flex-shrink'>取值為 <number> ，用來(lái)指定項(xiàng)目的收縮比率；若在flex縮寫(xiě)省略了此屬性值，則flex-shrink的指定值是 1；

3. <'flex-basis'>取值為 <length> | auto ，用來(lái)定義在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間，也就是子元素的基準(zhǔn)值，flex-basis 規(guī)定的范圍取決于 box-sizing；若在flex縮寫(xiě)省略了此屬性值，則flex-basis的指定值是 0%。

flex-basis取值的幾種情況：

1. 固定的長(zhǎng)度值，（比如350px），則該項(xiàng)目將占據(jù)固定長(zhǎng)度的空間；

2. auto,首先會(huì)檢索該項(xiàng)目的主尺寸（也就是該項(xiàng)目的width/height的值，是width還是height取決于主軸的方向，下面假設(shè)主軸的方向?yàn)樗椒较颍绻擁?xiàng)目的主尺寸不為auto，則該項(xiàng)目的flex-basis（基準(zhǔn)值）采用主尺寸的值；如果該項(xiàng)目的主尺寸為auto（也就是width:auto或不設(shè)置項(xiàng)目的width屬性時(shí)），則使用該項(xiàng)目的內(nèi)容content大小為基準(zhǔn)值；

3. 百分比，根據(jù)其包含塊（即伸縮父容器）的主尺寸計(jì)算。如果包含塊的主尺寸未定義（即父容器的主尺寸取決于子元素），則計(jì)算結(jié)果和設(shè)為 auto 一樣。

flex 的常見(jiàn)值

flex的默認(rèn)值：由于 flex-grow、flex-shrink、flex-basis三個(gè)屬性值在不設(shè)置的情況下默認(rèn)值分別為 0、1、auto，所以flex的默認(rèn)值為：flex:0 1 auto;

.item {
    flex: 0 1 auto;
}
/*這種情況先根據(jù)width／height屬性決定元素的尺寸。
（如果項(xiàng)目的主尺寸為auto，則會(huì)以其內(nèi)容大小為基準(zhǔn)）
當(dāng)剩余空間為正值時(shí)，伸縮項(xiàng)目無(wú)法伸縮，但當(dāng)空間不足時(shí)，伸縮項(xiàng)目可收縮至其[最小]值。
默認(rèn)狀態(tài)下，伸縮項(xiàng)目不會(huì)收縮至比其最小內(nèi)容尺寸更小。
可以通過(guò)設(shè)置「min-width」或「min-height」屬性來(lái)改變這個(gè)默認(rèn)狀態(tài)。*/

flex: 0 auto：由于之前提到過(guò)，若在flex的縮寫(xiě)中省略了flex-shrink的值，則該值指定為 1，所以flex:0 auto就相當(dāng)于flex:0 1 auto（也就是與flex取默認(rèn)值一樣）；

flex: initial：與flex:0 1 auto相同；

flex: auto: 若在flex的縮寫(xiě)中省略了flex-grow和flex-shrink的值，則他們的值都指定為 1，所以flex:auto就相當(dāng)于flex:1 1 auto；

.item {
    flex: auto;  /*相當(dāng)于flex:1 1 auto;*/
}
/*根據(jù)width／height屬性決定元素的尺寸，但是完全可以伸縮，會(huì)吸收主軸上剩下的空間*/

flex:none：相當(dāng)于flex: 0 0 auto;

.item {
    flex: none;  /*相當(dāng)于flex:0 0 auto;*/
}
/*根據(jù)width／height屬性決定元素的尺寸，但是完全不可以伸縮*/

當(dāng)flex取值為某個(gè)正數(shù)時(shí)，則這個(gè)正數(shù)是flex-grow的取值，由于在flex的縮寫(xiě)中省略了flex-shrink和flex-basis的值，而他們?cè)诒皇÷粤藭r(shí)的取值分別為1、0%，所以flex:1就相當(dāng)于flex:1 1 0%；

.item {
    flex: 1;  /*相當(dāng)于flex:1 1 0%;*/
}
/*以父容器的寬度為基數(shù)計(jì)算，元素完全可伸縮*/

當(dāng) flex 取值為一個(gè)長(zhǎng)度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1（注意 0% 是一個(gè)百分比而不是一個(gè)非負(fù)數(shù)字）；

.item {
    flex:120px;  /*相當(dāng)于flex:1 1 120px;*/
}
.item1 {
   flex: 0%; /*相當(dāng)于flex:1 1 0%;*/
}

當(dāng) flex 取值為兩個(gè)非負(fù)數(shù)字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%；

.item {
    flex:2 1;  /*相當(dāng)于flex:2 1 0%;*/
}

當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字和一個(gè)長(zhǎng)度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1；

.item {
    flex:2 120px;  /*相當(dāng)于flex:2 1 120px;*/
}

舉例

html如下：

<div class="box">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
  </div>

css如下：

.box {
  display: flex;
  width: 800px;
}
.box > div {
  height: 200px;
}
.item-1 {
  width: 160px;
  flex: 2 1 0%;
  background: #2ecc71;
}
.item-2 {
  width: 100px;
  flex: 2 1 auto;
  background: #3498db;
}
.item-3 {
  flex: 1 1 200px;
  background: #9b59b6;
}

得到的結(jié)果如下：

主軸上父容器總尺寸為 800px

子元素的總基準(zhǔn)值是：0% + auto + 200px = 300px，其中

1. - 0% 即 0 * 800px = 0寬度

2. - auto 對(duì)應(yīng)取主尺寸即 100px

故剩余空間為 800px - 300px = 500px

伸縮放大系數(shù)之和為： 2 + 2 + 1 = 5

剩余空間分配如下：

1. - item-1 和 item-2 各分配 2/5，各得 200px

2. - item-3 分配 1/5，得 100px

各項(xiàng)目最終寬度為：

1. - item-1 = 0% + 200px = 200px

2. - item-2 = auto + 200px = 300px

3. - item-3 = 200px + 100px = 300px

當(dāng) item-1 基準(zhǔn)值取 0% 的時(shí)候，是把該項(xiàng)目視為零尺寸的，故即便聲明其尺寸為 160px，也并沒(méi)有什么用，形同虛設(shè)

而 item-2 基準(zhǔn)值取 auto 的時(shí)候，根據(jù)規(guī)則基準(zhǔn)值使用值是主尺寸值即 100px，故這 100px 不會(huì)納入剩余空間

關(guān)于“css中如何實(shí)現(xiàn)Flex布局的可伸縮性”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：css中如何實(shí)現(xiàn)Flex布局的可伸縮性
本文地址：http://jinyejixie.com/article34/pshsse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站建設(shè)、全網(wǎng)營(yíng)銷推廣、企業(yè)網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(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)