国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS > Flex 布局中的放大和收縮計算

mayaohua / 2942人閱讀

摘要：第二個子元素將分配到，因為其伸縮放大系數(shù)為。你也可以賦予你的子元素一個伸縮收縮系數(shù)，如下伸縮收縮系數(shù)，盡管稱謂如此，但還是正值即上述聲明中的第二個無單位值。由于子元素上設(shè)置了伸縮收縮系數(shù)第一個子元素將移除溢出量的，即。其計算值因此變?yōu)椤?/p>

原文：https://dev.opera.com/articles/flexbox-basics/


譯者注：本文僅簡單翻譯下原文中關(guān)于如何計算 flex 屬性的值的部分。其他有關(guān) Flex 布局的知識本文不作探討。


2015.12.5更新：關(guān)于 flex 不同的取值情況，以及 flex-basis 的取值意義，請參考我在這個問題中的回答：http://segmentfault.com/q/1010000004080910/a-1020000004100314
讓你的元素伸縮

伸縮盒最強大的特性或許就在于能使得伸縮流方向中的子元素的長度（如果 flex-flow 為 row ，長度指 width，如果 flex-flow 為 column 則指 height）成為可伸縮量，該長度隨伸縮流中父元素的可用空間量而變化。該特性通過使用 flex 屬性實現(xiàn)，此屬性的值由三部分構(gòu)成。讓咱們一個個地來添加這些部分同時觀察其影響。首先，一個“伸縮放大系數(shù) flex grow factor ”：

#first {flex: 1;}
#second {flex: 1;}
#third {flex: 1;}

這些無單位值用作比例——它們規(guī)定每個子元素應(yīng)當(dāng)占據(jù)父元素中的多少可用空間。如果都設(shè)置為 1，則在伸縮盒中的每個子元素將設(shè)為相等尺寸。如果給其中一個子元素賦值為 2，則該子元素將占據(jù)其他子元素的兩倍空間，如下所示：

#first {flex: 1;}
#second {flex: 2;}
#third {flex: 1;}

你也可以為每個子元素設(shè)置一個伸縮基準(zhǔn)值 flex basis，比如這樣：

#first {flex: 1 200px;}
#second {flex: 2 300px;}
#third {flex: 1 250px;}

首先，根據(jù)伸縮流方向?qū)⑸炜s基準(zhǔn)值應(yīng)用為每個子元素的寬度或高度。接著，根據(jù)伸縮放大系數(shù)，將父元素內(nèi)剩余空間分配給子元素，得到子元素的最終寬度。據(jù)此當(dāng)總共 750px 時，子元素主軸方向上尺寸為 200px，300px 和 250px。如果父容器主軸方向為 950px，那么將多出 200px 來分配給子元素。第一個和第三個子元素分別分配到 50px，因為其伸縮放大系數(shù)為 1，它們最終尺寸各為 250px 和 300px。第二個子元素將分配到 100px，因為其伸縮放大系數(shù)為 2。其最終尺寸為 400px。

flex 的第三部分值很少用到，但以防萬一咱們還是看看。你也可以賦予你的子元素一個“伸縮收縮系數(shù) flex shrink factor”，如下：

#first {flex: 1 1 400px;}
#second {flex: 2 3 600px;}
#third {flex: 1 2 400px;}

伸縮收縮系數(shù)，盡管稱謂如此，但還是正值——即上述聲明中的第二個無單位值。它們只有當(dāng)子元素在主軸上溢出父容器的時候才會生效。它們也是作為比例值，但它們規(guī)定的是“溢出量”（子元素溢出父盒在之外的量）的比例，溢出量將從每個子元素的尺寸里面扣除，從而使得子元素總尺寸減少到和父元素的尺寸相等——實際上就是要阻止溢出。

我們來考慮主軸上 1100px 的父容器。這將造成我們上面的子元素溢出父容器 300px（子元素在主軸上總共是 1400px）。由于子元素上設(shè)置了伸縮收縮系數(shù)：

第一個子元素將移除溢出量的 1/6，即 50px。其計算值因此變?yōu)?350px。

第二個子元素將移除溢出量的 3/6，即 150px。其計算值因此變?yōu)?450px。

第三個子元素將移除溢出量的 2/6，即 100px。其計算值因此變?yōu)?300px。

因此伸縮收縮系數(shù)越高元素反而越小。

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111221.html

相關(guān)文章

  • flex布局的元素如何分配容器的剩余空間

    摘要：三個元素會從左往右占據(jù)父元素的空間這很顯然。左右側(cè)邊欄的寬度都是，中間元素的寬度將會占據(jù)元素的剩余寬度。同樣會導(dǎo)致父元素有部分剩余空間沒有分配。 自從開始開學(xué)習(xí) CSS 布局，想要比較靈活的把父元素的空間分配給各個子元一直是各個前端程序員的夢想。在 flex 之前，如果不是專門去搜索相關(guān)的解決方案，一般人幾乎想不出非常靈活的三（多）欄等高布局方案，而即使看了解決方案，很多人也會大呼奇技...

    ethernet 評論0 收藏0

  • 幾種常見布局的flex寫法

    摘要：幾種常見布局的寫法首先要對父元素設(shè)置布局方式，同時在本案例中，利用媒體查詢，當(dāng)屏幕分辨率小于的時候，布局變成縱向排列。兩列布局定寬是的簡寫方式。 flex布局目前基本上兼容主流的瀏覽器，且實現(xiàn)方式簡單。我整理了flex的一些知識點，并且總結(jié)歸納了幾種常見布局的flex寫法 ?flex基礎(chǔ)知識點 flex-grow和flex-shrink相關(guān)計算公式 公式1：子元素空間 < 父容器 父...

    fish 評論0 收藏0

  • flex布局遇到white-space:nowrap怎么超出一行顯示省略號

    摘要：后兩個屬性可選，該屬性有兩個快捷值和。屬性定義了項目的縮小壓縮比例，默認為，即如果空間不足，該項目將縮小。屬性定義了在分配多余空間之前，項目占據(jù)的主軸空間。當(dāng)我們設(shè)置，項目控件由于不能計算多余的空間導(dǎo)致無法收縮了。 寫在最前：當(dāng)flex遇到white-space:nowrap，你知道怎么破局嗎？切圖帶你分析原理，三個方案任意選擇！ 一、場景： showImg(https://segm...

    tylin 評論0 收藏0

  • CSS Flexbox 可視化手冊

    摘要：應(yīng)該把其中的每一行都視為單獨的彈性容器。這個空間被稱為正自由空間。這項工作是在文件中完成的，它負責(zé)跟蹤項目依賴及其版本。 翻譯：瘋狂的技術(shù)宅原文：https://medium.com/swlh/css-f... 本文首發(fā)微信公眾號：jingchengyideng歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章 介紹 Flexbox是 Flexible Box Module（彈性盒模型）...

    AdolphLWQ 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<