關于flex-grow的陷阱

zhaochunqi 發布于2019-08-29 13:56 / 745人閱讀

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

前一陣在使用flex布局進行寬度處理時，發現了flex-grow并不是按照預期的情況進行比例處理，頓時覺得有點懵逼。

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

話不多說，直接上代碼：

.flex-container {
    display: flex;
    width: 100%;
}
.flex-item {
    flex-grow: 1;
    list-style-type: none;
}
.big {
    flex-grow: 3;
}


    理論應該是小的三倍長
    但實際并不是這樣

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

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大

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

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

重點來了，這里的剩余空間才是關鍵。
對于一個flex-item來說，它的初始空間并不是0，而是另一個屬性值auto（元素內容占用的空間）。

這樣就導致了我們設置了flex-grow的效果并不是將整個寬度進行等比例的拆分，而是對去除內容的寬度進行了比例劃分。

而如果想要打到我們實際所想的效果，我們就需要使用flex屬性來代替原來的。
因為根據MDN文檔的描述，我們就知道了

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

這樣我們使用flex時只指定一個數字（寬度值會轉化成flex-basis）時，flex-basis會自動轉換為0%，而數字正好轉換成了要設置的比例（flex-grow值）。

于是修改css代碼如下：

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

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

ps.stackoverflow原問題鏈接

云服務器 GPU云服務器面試陷阱創業陷阱陷阱清單陷阱

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112803.html

Flexbox布局的正確使用姿勢

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

GitCafe 2019-08-29 12:50 評論0 收藏0
Flex 布局

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

ShevaKuilin 2019-08-30 15:43 評論0 收藏0
關于flex-shrink如何計算的冷知識

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

KaltZK 2019-08-29 17:00 評論0 收藏0
flex布局踩過的那些坑

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

劉玉平 2019-08-29 11:07 評論0 收藏0
Flexbox Guide

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

stefanieliang 2019-08-29 17:02 評論0 收藏0