資訊專欄INFORMATION COLUMN
摘要：第二個(gè)子元素將分配到，因?yàn)槠渖炜s放大系數(shù)為。你也可以賦予你的子元素一個(gè)伸縮收縮系數(shù)，如下伸縮收縮系數(shù)，盡管稱謂如此，但還是正值即上述聲明中的第二個(gè)無(wú)單位值。由于子元素上設(shè)置了伸縮收縮系數(shù)第一個(gè)子元素將移除溢出量的，即。其計(jì)算值因此變?yōu)椤?/p>
讓你的元素伸縮原文：https://dev.opera.com/articles/flexbox-basics/
譯者注：本文僅簡(jiǎn)單翻譯下原文中關(guān)于如何計(jì)算 flex 屬性的值的部分。其他有關(guān) Flex 布局的知識(shí)本文不作探討。
2015.12.5更新：關(guān)于 flex 不同的取值情況，以及 flex-basis 的取值意義，請(qǐng)參考我在這個(gè)問(wèn)題中的回答：http://segmentfault.com/q/1010000004080910/a-1020000004100314
伸縮盒最強(qiáng)大的特性或許就在于能使得伸縮流方向中的子元素的長(zhǎng)度（如果 flex-flow 為 row ，長(zhǎng)度指 width，如果 flex-flow 為 column 則指 height）成為可伸縮量，該長(zhǎng)度隨伸縮流中父元素的可用空間量而變化。該特性通過(guò)使用 flex 屬性實(shí)現(xiàn)，此屬性的值由三部分構(gòu)成。讓咱們一個(gè)個(gè)地來(lái)添加這些部分同時(shí)觀察其影響。首先，一個(gè)“伸縮放大系數(shù) flex grow factor ”：
#first {flex: 1;}
#second {flex: 1;}
#third {flex: 1;}
這些無(wú)單位值用作比例——它們規(guī)定每個(gè)子元素應(yīng)當(dāng)占據(jù)父元素中的多少可用空間。如果都設(shè)置為 1，則在伸縮盒中的每個(gè)子元素將設(shè)為相等尺寸。如果給其中一個(gè)子元素賦值為 2，則該子元素將占據(jù)其他子元素的兩倍空間，如下所示：
#first {flex: 1;}
#second {flex: 2;}
#third {flex: 1;}
你也可以為每個(gè)子元素設(shè)置一個(gè)伸縮基準(zhǔn)值 flex basis，比如這樣：
#first {flex: 1 200px;}
#second {flex: 2 300px;}
#third {flex: 1 250px;}
首先，根據(jù)伸縮流方向?qū)⑸炜s基準(zhǔn)值應(yīng)用為每個(gè)子元素的寬度或高度。接著，根據(jù)伸縮放大系數(shù)，將父元素內(nèi)剩余空間分配給子元素，得到子元素的最終寬度。據(jù)此當(dāng)總共 750px 時(shí)，子元素主軸方向上尺寸為 200px，300px 和 250px。如果父容器主軸方向?yàn)?950px，那么將多出 200px 來(lái)分配給子元素。第一個(gè)和第三個(gè)子元素分別分配到 50px，因?yàn)槠渖炜s放大系數(shù)為 1，它們最終尺寸各為 250px 和 300px。第二個(gè)子元素將分配到 100px，因?yàn)槠渖炜s放大系數(shù)為 2。其最終尺寸為 400px。
flex 的第三部分值很少用到，但以防萬(wàn)一咱們還是看看。你也可以賦予你的子元素一個(gè)“伸縮收縮系數(shù) flex shrink factor”，如下：
#first {flex: 1 1 400px;}
#second {flex: 2 3 600px;}
#third {flex: 1 2 400px;}
伸縮收縮系數(shù)，盡管稱謂如此，但還是正值——即上述聲明中的第二個(gè)無(wú)單位值。它們只有當(dāng)子元素在主軸上溢出父容器的時(shí)候才會(huì)生效。它們也是作為比例值，但它們規(guī)定的是“溢出量”（子元素溢出父盒在之外的量）的比例，溢出量將從每個(gè)子元素的尺寸里面扣除，從而使得子元素總尺寸減少到和父元素的尺寸相等——實(shí)際上就是要阻止溢出。
我們來(lái)考慮主軸上 1100px 的父容器。這將造成我們上面的子元素溢出父容器 300px（子元素在主軸上總共是 1400px）。由于子元素上設(shè)置了伸縮收縮系數(shù)：
第一個(gè)子元素將移除溢出量的 1/6，即 50px。其計(jì)算值因此變?yōu)?350px。
第二個(gè)子元素將移除溢出量的 3/6，即 150px。其計(jì)算值因此變?yōu)?450px。
第三個(gè)子元素將移除溢出量的 2/6，即 100px。其計(jì)算值因此變?yōu)?300px。
因此伸縮收縮系數(shù)越高元素反而越小。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111221.html
摘要：三個(gè)元素會(huì)從左往右占據(jù)父元素的空間這很顯然。左右側(cè)邊欄的寬度都是，中間元素的寬度將會(huì)占據(jù)元素的剩余寬度。同樣會(huì)導(dǎo)致父元素有部分剩余空間沒(méi)有分配。 自從開始開學(xué)習(xí) CSS 布局，想要比較靈活的把父元素的空間分配給各個(gè)子元一直是各個(gè)前端程序員的夢(mèng)想。在 flex 之前，如果不是專門去搜索相關(guān)的解決方案，一般人幾乎想不出非常靈活的三（多）欄等高布局方案，而即使看了解決方案，很多人也會(huì)大呼奇技...
摘要：幾種常見(jiàn)布局的寫法首先要對(duì)父元素設(shè)置布局方式，同時(shí)在本案例中，利用媒體查詢，當(dāng)屏幕分辨率小于的時(shí)候，布局變成縱向排列。兩列布局定寬是的簡(jiǎn)寫方式。 flex布局目前基本上兼容主流的瀏覽器，且實(shí)現(xiàn)方式簡(jiǎn)單。我整理了flex的一些知識(shí)點(diǎn)，并且總結(jié)歸納了幾種常見(jiàn)布局的flex寫法 ?flex基礎(chǔ)知識(shí)點(diǎn) flex-grow和flex-shrink相關(guān)計(jì)算公式 公式1：子元素空間 < 父容器 父...
摘要：后兩個(gè)屬性可選，該屬性有兩個(gè)快捷值和。屬性定義了項(xiàng)目的縮小壓縮比例，默認(rèn)為，即如果空間不足，該項(xiàng)目將縮小。屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間。當(dāng)我們?cè)O(shè)置，項(xiàng)目控件由于不能計(jì)算多余的空間導(dǎo)致無(wú)法收縮了。 寫在最前：當(dāng)flex遇到white-space:nowrap，你知道怎么破局嗎？切圖帶你分析原理，三個(gè)方案任意選擇！ 一、場(chǎng)景： showImg(https://segm...
摘要：應(yīng)該把其中的每一行都視為單獨(dú)的彈性容器。這個(gè)空間被稱為正自由空間。這項(xiàng)工作是在文件中完成的，它負(fù)責(zé)跟蹤項(xiàng)目依賴及其版本。 翻譯：瘋狂的技術(shù)宅原文：https://medium.com/swlh/css-f... 本文首發(fā)微信公眾號(hào)：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 介紹 Flexbox是 Flexible Box Module（彈性盒模型）...
閱讀 2595·2021-10-25 09:45
閱讀 1254·2021-10-14 09:43
閱讀 2310·2021-09-22 15:23
閱讀 1538·2021-09-22 14:58
閱讀 1944·2019-08-30 15:54
閱讀 3554·2019-08-30 13:00
閱讀 1367·2019-08-29 18:44
閱讀 1580·2019-08-29 16:59
