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

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

如何對子項目進行排序?

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

使用 order屬性, 它的默認值是0

元素按照order順序排列

如何定義子項目大小?

flex布局提供另外一個屬性 flex-basis

它用來設定元素在主軸方向的大小

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

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

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

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

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

我們需要加上flex-grow這個屬性

.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元素會按照1:1的比例把父元素剩余的空間瓜分掉, 效果如圖

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

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

我們也可以調整比例

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屬性, 它叫做多余空間削減比例

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

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

我們先看一種簡單的情況

.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, 默認值為1, 可以不寫*/ } div:nth-child(2) {width: 200px; /*子元素B寬度為200*/background-color: lightseagreen;flex-shrink: 1; /*多余空間削減比例為1, 默認值為1, 可以不寫*/ }

削減比例我們設置了1:1 , 那么實際結果呢?

從圖中的實際效果來看,

A元素削減了60個像素

B元素削減了40個像素

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

這個3:2又是怎么來的呢?

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

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

那么, 根據我們所得的公式, 如果我們想讓上面的例子當中

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; }

最終效果:

---

讓我們來總結一下

項目的屬性（添加在子元素身上的屬性）

• Order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

.item {order: <integer>; }

• flex-basis屬性

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

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

• align-self屬性

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

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

• flex-grow屬性

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

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

• flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

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

---

本文摘自 知乎號：千鋒HTML5學院

原文鏈接：如何講清楚Flex彈性盒模型(中)？

Eric：如何講清楚Flex彈性盒模型？(上)?zhuanlan.zhihu.comEric：詳解JavaScript嚴格模式?zhuanlan.zhihu.comEric：vue 過濾器?zhuanlan.zhihu.com

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。