成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于flex-grow的陷阱

zhaochunqi / 756人閱讀

摘要：前一陣在使用布局進(jìn)行寬度處理時(shí)，發(fā)現(xiàn)了并不是按照預(yù)期的情況進(jìn)行比例處理，頓時(shí)覺得有點(diǎn)懵逼。對(duì)于一個(gè)來說，它的初始空間并不是，而是另一個(gè)屬性值元素內(nèi)容占用的空間。于是修改代碼如下這樣設(shè)置的比例就如我們所愿的顯示出來了。

前一陣在使用flex布局進(jìn)行寬度處理時(shí)，發(fā)現(xiàn)了flex-grow并不是按照預(yù)期的情況進(jìn)行比例處理，頓時(shí)覺得有點(diǎn)懵逼。

在stackoverflow搜索之后，終于搞明白了其中的奧秘。

話不多說，直接上代碼：

.flex-container {
    display: flex;
    width: 100%;
}
.flex-item {
    flex-grow: 1;
    list-style-type: none;
}
.big {
    flex-grow: 3;
}
    
    
  • 理論應(yīng)該是小的三倍長
    • 
    
  • 但實(shí)際并不是這樣
    •

我們參照阮一峰的flex教程就可以看到對(duì)于這個(gè)屬性的解釋：

flex-grow屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大


如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個(gè)項(xiàng)目的flex-grow屬性為2，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

按照正常理解我們的代碼沒有問題啊，怎么比例并不是設(shè)置的那樣呢？

重點(diǎn)來了，這里的剩余空間才是關(guān)鍵。
對(duì)于一個(gè)flex-item來說，它的初始空間并不是0，而是另一個(gè)屬性值auto（元素內(nèi)容占用的空間）。

這樣就導(dǎo)致了我們?cè)O(shè)置了flex-grow的效果并不是將整個(gè)寬度進(jìn)行等比例的拆分，而是對(duì)去除內(nèi)容的寬度進(jìn)行了比例劃分。

而如果想要打到我們實(shí)際所想的效果，我們就需要使用flex屬性來代替原來的。
因?yàn)楦鶕?jù)MDN文檔的描述，我們就知道了

flex規(guī)定了彈性元素如何伸長或縮短以適應(yīng)flex容器中的可用空間。這是一個(gè)簡寫屬性，可以同時(shí)設(shè)置flex-grow,flex-shrink與flex-basis。

這樣我們使用flex時(shí)只指定一個(gè)數(shù)字（寬度值會(huì)轉(zhuǎn)化成flex-basis）時(shí)，flex-basis會(huì)自動(dòng)轉(zhuǎn)換為0%，而數(shù)字正好轉(zhuǎn)換成了要設(shè)置的比例（flex-grow值）。

于是修改css代碼如下：

.flex-item {
    flex: 1;
}
.big {
    flex: 3;
}

這樣設(shè)置的比例就如我們所愿的顯示出來了。

ps.stackoverflow原問題鏈接

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112803.html

相關(guān)文章

  • Flexbox布局的正確使用姿勢(shì)

    摘要：分配空間原理影響布局分配空間的屬性有三個(gè)，分別是和。伸縮項(xiàng)目擴(kuò)展寬度項(xiàng)目容器寬度項(xiàng)目寬度或項(xiàng)目設(shè)置的總和對(duì)應(yīng)的比例拉伸后伸縮項(xiàng)目寬度原伸縮項(xiàng)目寬度擴(kuò)展寬度我們來計(jì)算一下上面栗子中第一個(gè)伸縮項(xiàng)目拉伸后的寬度。 在項(xiàng)目中，我們還會(huì)大量使用到flexbox的新舊屬性，但大多數(shù)人一般只會(huì)寫新屬性，舊屬性交由autoprefixer處理，但其實(shí)完成同樣功能的新舊屬性表現(xiàn)形式卻不盡相同。還有部分人...

    GitCafe 評(píng)論0 收藏0

  • Flex 布局

    摘要：首先，實(shí)現(xiàn)布局需要先指定一個(gè)容器，任何一個(gè)容器都可以被指定為布局，這樣容器內(nèi)部的元素就可以使用來進(jìn)行布局。注意當(dāng)時(shí)設(shè)置布局之后，子元素的的屬性將會(huì)失效。 在沒有接觸Flex之前一直使用float、display、position 。說實(shí)話用起來非常惡心。當(dāng)使用Flex時(shí)，我們可以簡潔優(yōu)雅實(shí)現(xiàn)復(fù)雜的頁面布局 1、Flex 布局？showImg(https://segmentfault.c...

    ShevaKuilin 評(píng)論0 收藏0

  • 關(guān)于flex-shrink如何計(jì)算的冷知識(shí)

    摘要：先回顧一下假設(shè)有一個(gè)內(nèi)包含三個(gè)子，寬度分別對(duì)于對(duì)于剩余空間分配比例的計(jì)算相信用過布局的都非常熟悉了。另外，我發(fā)現(xiàn)很多點(diǎn)贊數(shù)很多的文章，給出的計(jì)算公式是錯(cuò)誤的。 先回顧一下flex-grow 假設(shè)有一個(gè)div內(nèi)包含三個(gè)子div1， div2, div3,寬度分別200px.對(duì)于flex-grow對(duì)于剩余空間分配比例的計(jì)算相信用過flex布局的都非常熟悉了。這里還是簡單列一下計(jì)算公式：假設(shè)...

    KaltZK 評(píng)論0 收藏0

  • flex布局踩過的那些坑

    摘要：接下來說說我踩過的那些坑布局版本兼容問題布局自提出之后，變化過好幾個(gè)版本標(biāo)志標(biāo)志標(biāo)志新增了對(duì)項(xiàng)的規(guī)定草案階段兼容方案父級(jí)布局不用考慮其他屬性都對(duì)應(yīng)相關(guān)的版本方案，目前項(xiàng)目中是只寫最新的方案，由自動(dòng)添加兼容方案。 接觸H5項(xiàng)目后，開始了解到flex布局，功能非常之強(qiáng)大，用起來相當(dāng)之舒服。基本的知識(shí)介紹就不說了，參考http://www.ruanyifeng.com/blo...。 接下來...

    劉玉平 評(píng)論0 收藏0

  • Flexbox Guide

    摘要：模型，通常被稱為，是一種一維的布局模型。它將基于行或列控制布局，但不能同時(shí)控制布局。的主要目標(biāo)是允許項(xiàng)目填充其容器提供的整個(gè)空間，具體取決于您設(shè)置的一些規(guī)則。那么超出的需要被消化通過收縮因子，所以加權(quán)綜合可得。 showImg(https://segmentfault.com/img/remote/1460000016761795?w=871&h=559); Flexible Box ...

    stefanieliang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<