A
B
C
資訊專欄INFORMATION COLUMN
摘要：起因工作以后由于大量使用到了布局而碰到了一些尚不清楚的問題，以及一些有意思的特性，在此寫篇博客記錄一下。三個值的含義眾所周知，布局所有的屬性有兩種一種作用在彈性容器上，一種作用在彈性項目上，而就是作用在彈性項目上的屬性。
起因
工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的問題，以及一些有意思的特性，在此寫篇博客記錄一下。
flex三個值的含義眾所周知，flex布局所有的屬性有兩種：一種作用在彈性容器（Flex container）上，一種作用在彈性項目（Flex item）上，而flex就是作用在彈性項目上的屬性。
flex 是 flex-grow、flex-shrink、flex-basis 三個值的簡寫，這個值規定了彈性項目如何伸長或壓縮以適應彈性容器中的可用空間。
flex-grow 定義彈性項目的放大比列，可以接受數字（小數也可以），不接受負值，默認值是 0 。這個值如果為 0 就意味著即使容器內還存在剩余空間，彈性項目也不會放大。
flex-shrink 定義彈性項目的收縮比例，同樣接受數字（小數也可以），不接受負值，默認值是 1 。如果一個彈性項目的 flex-shrink 設為 0 而其他彈性項目的 flex-shrink 值為 1 ，則當彈性容器空間不足時，該彈性項目不會被壓縮，而其他的彈性項目會被等比例壓縮。
flex-basis 定義在分配容器內空間之前，彈性項目占據的主軸空間（不一定是寬度，因為主軸方向可以是縱向的），默認值是 auto 。如果對彈性項目同時設置 flex-basis 和 width ， width 會被忽略。還要注意當主軸是橫向的時候，如果設定了 max-width 或 min-width 會限制彈性項目的寬度。
這里講一下 flex-basis 取值的情況：
指定的數值，比如以px、em為單位的數值。
百分數，取百分數的話就是相對其父彈性容器的寬或高（取決于主軸方向）來計算，如果包含塊的尺寸未指定（也就是說父元素的尺寸取決于子元素），那么這時候結果和 auto 一樣。
auto 值的意思是基于彈性項目的 width 或 height 調整大小（根據主軸的橫向或者縱向），如果沒有設置 width 或 height 則根據內容自適應。
設置flex之后的彈性項目如何計算寬度這里給一個代碼的例子
ABC
#content {
display: flex;
width: 360px;
}
.box1 {
width: 100px;
flex: 1 1 0;
}
.box2 {
width: 100px;
flex: 1 1 0;
}
.box3 {
width: 100px;
flex: 1 1 0;
}
由于flex-basis的值為 0 ，所以此時彈性容器的剩余空間為 360px - 0 * 3 = 360px ，由于3個元素都設置了 flex-grow: 1 ，所以剩余空間3個元素所占比例為 1:1:1 ，每個元素的寬度就是 360px / 3 = 120px 。
如果把代碼改一下呢？
#content {
display: flex;
width: 360px;
}
.box1 {
width: 100px;
flex: 1 1 0;
}
.box2 {
width: 100px;
flex: 1 1 auto;
}
.box3 {
flex: 1 1 200px;
}
此時，彈性容器內剩余寬度為：360px - 0 - 100px - 200px = 60px，3個元素所占剩余空間比例同樣是 1:1:1 。那么寬度分別就是：0 + 20px = 20px ，100px + 20px = 120px ，200px + 20px = 220px 。
對應復雜情況的計算，這里有一個回答寫得不錯：
flex設置成1和auto有什么區別
flex單值、雙值、三值的賦值規則是怎么樣的單值情況下：
一個無單位的數字：它會被當作 flex-grow 的值，flex-shrink 為 1 ，flex-basis 為 0%。
一個有效的寬度值：它會被當作 flex-basis 的值，flex-shrink 和 flex-grow 都是 1 。
關鍵字：比如 auto，none 這兩個下文會講。
雙值情況下：
第一個值必須是無單位的數字，它會作為 flex-grow 的值；第二個值可以是：
一個無單位的數字：它會被當作 flex-shrink 的值，而flex-basis 的值就是 0% 。
一個有效的寬度值：它會被當作 flex-basis 的值，flex-shrink 的取值就是 1 。
三值情況下：
第一個和第二個值必須是無單位的數，分別作為 flex-grow，flex-shrink，flex-basis 的值；第三個值可以是有效的寬度值，也可以是 auto 。
flex: 0，flex: 1，flex: auto，flex: none，flex: 0%的區別是什么？講完了上面的三種賦值方式之后，那么簡寫就變得很容易理解了：
flex: 0 是 flex: 0 1 0% 的簡寫
flex: none 是 flex: 0 0 auto 的簡寫
flex: 1 是 flex: 1 1 0% 的簡寫
flex: auto 是 flex: 1 1 auto 的簡寫
flex: 0% 是 flex: 1 1 0% 的簡寫
小結一下：以上就是對 flex 這個屬性取值的梳理，最近一年沒有寫過博客，最近還是要填一下坑的，前端之路且歌且行～
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114130.html
摘要：今天想寫的問題來自于網易一面的時候，面試官問我如何在移動端的頁面上畫一條的線。上面的結論我在端谷歌瀏覽器的設備模擬器里證實了有效，但是安卓和真機并沒有試過。 起因 最近一個月都在準備校招，所以沒什么時間寫博客。今天想寫的問題來自于網易一面的時候，面試官問我如何在移動端的頁面上畫一條1px的線。這個問題我模糊地記得之前看過相關文章，但是我清楚地記得當時自己腦子一片空白。是的，一面掛了，但...
摘要：瀏覽器兼容問題什么是瀏覽器兼容所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。 瀏覽器兼容問題 1、什么是瀏覽器兼容 所謂的瀏覽器兼容性問題，是指因為不同的瀏覽器對同一段代碼有不同的解析，造成頁面顯示效果不統一的情況。 2、瀏覽器兼容產生的原因 因為不同瀏覽器使用內核及所支持的HTML等網頁語言標準不同； 以及用戶客戶端的環境不同（如...
摘要：布局是年提出的，目前已經被所有瀏覽器支持，也是我現在布局的首選方案。實踐用來實現圣杯布局圣杯布局指的是一種最常見的網站布局。一般情況下，這種布局要求固定高度，固定寬度，自適應。 Flex 布局是 W3C 2009年提出的，目前已經被所有瀏覽器支持，也是我現在布局的首選方案。Flex 布局使用起來是非常簡單的，本文談一談平時使用可能需要注意的問題。 align-content 平時使用 ...
摘要：組件化編碼的一切都是基于組件的。屬性返回目標節點的前一個兄弟節點。如果目標節點前面沒有同屬于一個父節點的節點，將返回屬性是一個只讀屬性。而當變量離開環境時，則將其標記為離開環境。 第一次寫面試經歷，雖然之前有過一些電話面試經歷，但相對而言感覺此次的經歷對自己收獲還是比較大，這里留下面經當作日記吧！（面試時間：2018-6-12 下午2:10；時長：50min；公司：*） 1、說說Rea...
摘要：組件化編碼的一切都是基于組件的。屬性返回目標節點的前一個兄弟節點。如果目標節點前面沒有同屬于一個父節點的節點，將返回屬性是一個只讀屬性。而當變量離開環境時，則將其標記為離開環境。 第一次寫面試經歷，雖然之前有過一些電話面試經歷，但相對而言感覺此次的經歷對自己收獲還是比較大，這里留下面經當作日記吧！（面試時間：2018-6-12 下午2:10；時長：50min；公司：*） 1、說說Rea...
閱讀 2139·2021-10-14 09:43
閱讀 2201·2019-08-30 15:55
閱讀 730·2019-08-30 14:23
閱讀 2025·2019-08-30 13:21
閱讀 1240·2019-08-30 12:50
閱讀 2204·2019-08-29 18:46
閱讀 2285·2019-08-29 17:28
閱讀 2366·2019-08-29 17:21
