上一篇我們講解了, flex容器的屬性, 如何定義主軸方向, 以及主軸側(cè)軸對齊方式

這篇講解子元素的一些屬性.

如何對子項(xiàng)目進(jìn)行排序?

彈性盒模型第一次可以讓我們方便的對元素進(jìn)行排序

使用 order屬性, 它的默認(rèn)值是0

元素按照order順序排列

如何定義子項(xiàng)目大小?

flex布局提供另外一個(gè)屬性 flex-basis

它用來設(shè)定元素在主軸方向的大小

注意主軸可以是row方向, 也可以column方向

另外, 某個(gè)子元素, 可以單獨(dú)設(shè)置跟其它子元素不一致的(側(cè)軸)對齊方式.

最后, 要隆重的介紹flex-grow這個(gè)屬性了

它叫做『剩余空間瓜分比例』

從圖上可以看出, AB沒有撐滿flex容器, 如果希望AB調(diào)整大小撐滿容器的話

我們需要加上flex-grow這個(gè)屬性

.container {display: flex;width: 500px;.... } div:nth-child(1) {width: 100px;background-color: pink;flex-grow: 1; } div:nth-child(2) {width: 100px;background-color: lightseagreen;flex-grow: 1; }

那么AB元素會(huì)按照1:1的比例把父元素剩余的空間瓜分掉, 效果如圖

當(dāng)然, 如果你希望B保持不變, 只有A變大的話, 你可以這樣寫

div:nth-child(1) {background-color: pink;flex-grow: 1; } div:nth-child(2) {background-color: lightseagreen;flex-grow: 0; /*默認(rèn)值就是0, 其實(shí)不用寫*/ }

我們也可以調(diào)整比例

div:nth-child(1) {width:100px;background-color: pink;flex-grow: 2; } div:nth-child(2) {width:100px;background-color: lightseagreen;flex-grow: 1; }

AB按照2:1的比例瓜分了剩余空間

既然可以放大, 元素也能縮小

接下來介紹flex-shrink屬性, 它叫做多余空間削減比例

當(dāng)元素大小超出了flex父容器, 子元素可以按比例縮減.

但是這里的算法比剛才的flex-grow復(fù)雜了一些

我們先看一種簡單的情況

.container{display: flex;flex-direction: row;justify-content: flex-start;box-shadow: 0 0 0 1px black;height: 100px; width: 400px; /*父元素寬度為400*/ } div:nth-child(1) {width: 300px; /*子元素A寬度為300*/background-color: pink;flex-shrink: 1; /*多余空間削減比例為1, 默認(rèn)值為1, 可以不寫*/ } div:nth-child(2) {width: 200px; /*子元素B寬度為200*/background-color: lightseagreen;flex-shrink: 1; /*多余空間削減比例為1, 默認(rèn)值為1, 可以不寫*/ }

削減比例我們設(shè)置了1:1 , 那么實(shí)際結(jié)果呢?

從圖中的實(shí)際效果來看,

A元素削減了60個(gè)像素

B元素削減了40個(gè)像素

這并不是1:1啊, 這是3:2啊

這個(gè)3:2又是怎么來的呢?

其實(shí), 它就是AB元素的原始比例大小

所以, 在削減比例上, 元素還會(huì)受到原始大小比例的影響總結(jié)一個(gè)公式如下:子元素的削減比例===原始大小比例 X flex-shrink比例

那么, 根據(jù)我們所得的公式, 如果我們想讓上面的例子當(dāng)中

AB元素都削減一樣的大小該如何做呢?

答案就是:

div:nth-child(1) {width: 300px;background-color: pink;flex-shrink: 2; } div:nth-child(2) {width: 200px;background-color: lightseagreen;flex-shrink: 3; }

最終效果:

---

讓我們來總結(jié)一下

項(xiàng)目的屬性（添加在子元素身上的屬性）

• Order屬性

order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。

.item {order: <integer>; }

• flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。

.item {flex-basis: <length> | auto; /* default auto */ }

• align-self屬性

align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式，可覆蓋align-items屬性。默認(rèn)值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }

• flex-grow屬性

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

.item {flex-grow: <number>; /* default 0 */ }

• flex-shrink屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例，默認(rèn)為1，即如果空間不足，該項(xiàng)目將縮小。

.item {flex-shrink: <number>; /* default 1 */ }

---

千鋒HTML5學(xué)院：css偽元素的實(shí)用技巧?zhuanlan.zhihu.com千鋒HTML5學(xué)院：如何講清楚Flex彈性盒模型？(上)?zhuanlan.zhihu.com

總結(jié)

以上是生活随笔為你收集整理的flex 会使div撑满_如何讲清楚Flex弹性盒模型(中)？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。