什麼是彈性盒模型？

彈性盒模型是指在父級改變大小的時候內部的自己元素也會相應的改變大小，即子集會按照父級的大小按比例自適應大小。 彈性盒模型的提出可以解決一些響應式佈局的需求

如何使用彈性盒模型？

建立彈性盒模型： 給父級設定css屬性display: flex; 即可。

若子集寬度大於父級寬度則子集會整體壓縮或者給子集設定css屬性flex-shrink: 1;瀏覽器會根據flex-shrink的比值進行按比例縮放。

若子集寬度小於父級寬度則可給子集設定flex-grow: 1;瀏覽器會根據flex-grow的比值按比例擴大，將剩餘部分分佈給子集元素

在彈性盒模型中，我們把父級叫做容器 子集叫做專案

彈性盒模型中專案有哪些可設定的css屬性？

1.flex-shrink： 設定縮小比例 預設子集的該值均為1

案例：

程式碼：

效果：

分析：父級寬度： 500px 子集正常寬度每一個為300px 三個子集即需要父級900px的空間，但是父級寬度只有500px因此子集需要壓縮400px，子集設定了flex-shrink，壓縮比例為demo1：demo2：demo3 = 1 ： 2 ： 3；即 壓縮的400px將分成6份每一份為66.6666 即demo1需要減掉66.6666 ， demo2需要減掉 133.3333， demo3要減掉199.9999，即demo1剩餘部分為 300 - 66.6666 = 233.3334px ， demo2剩餘部分為 300 - 133.3333 = 166.6667， demo3剩餘部分為 300 - 199.9999 = 100

2.flex-grow： 設定擴大比例

不加flex-grow屬性時預設flex-grow: 0;

案例程式碼如下

效果：

新增flex-grow屬性之後的程式碼:

效果：

分析：父級寬度： 500px 子集正常寬度每一個為100px 三個子集即需要父級300px的空間，父級寬度500px超出子集200px，子集設定了flex-grow會按比例分配剩餘的200px，分配比例為demo1：demo2：demo3 = 1 ： 2 ： 3；即 剩餘的200px將分成6份，每一份的寬度為33.3333px；demo1將分配33.3333px， demo2將分配 66.6666px， demo3將分配99.9999px， 即demo1的寬度變為： 100px + 33.3333px = 133.3333px， demo2的寬度變為 100px + 66.6666px = 166.6666px ， demo3的寬度變為 100px + 99.9999px = 199.9999px。