屬性

• flex-grow
• flex-shrink
• flex
• flex-basis
• order
• align-self

因為 flex-grow，flex-shrink 計算較複雜，這邊會先介紹到 flex。

flex-grow

CodePen 範例

依照比例分配空間，如果有多的空間，flex item 將根據比例分配剩下的空間。

預設值為 flex-grow: 0，如下圖。

當 flex-grow: 1，表示將剩餘的空間分配給 flex item 1-5 各 1 份，於是會等比例放大。

以範例來說，每一個 flex item 的 width 各為 30px，加上 padding: 20px，margin: 10px，表示每一個 flex item 所佔的 width 為 90px。

所以 flex item 已經占的 width 為 90*5 = 450px

當設定 flex-grow: 1，表示將剩餘的空間分配給 flex item 1-5 各 1 份，剩餘的空間剩下 1000px- 450px=550px，這 550px 分配給 flex item 1-5 各 1 份，550px/5=110，每一個 flex item 將會多得到 110px，再加上原本的 width: 90px，每一個 flex item 的 width 總共 200px。

flex-shrink

flex-shrink 定義空間不夠時各個元素如何收縮。flex-shrink: 1 為預設值。

CodePen 範例

html {
  box-sizing: border-box;
}
.flex-container {
  width: 1000px;
  height: 500px;
  display: flex;
  background-color: violet;
}

.flex-container > div {
  padding: 20px;
  background-color: aqua;
  margin: 10px;
  width: 200px;
  height: 30px;
  flex-shrink: 1;
}

可以看到每一個 flex item 的 width = width: 200px + padding: 20px x 2 (左右2邊) + margin: 10px x 2 = 260px。

5 個 flex item 表示總共的 width 為 260px x 5 = 1300px

但是 flex container 的 width 也才 1000px，多出來 1300px - 1000px = 300px，這時候我們想要讓 flex item 依照我們想要的比例縮小時該怎麼做?

具體的計算方式為：
每個元素收縮的權重為 flex item 的 flex-shrink 乘自己的寬度。

以這一個範例，總權重為1 x 260 + 2 x 260 + 1 x 260 + 1 x 260 + 1 x 260 = 1560

我們剛剛有算出了已經超過 300px，那這 300px 將由 5 個 flex item 依比例分攤，現在看到 css code，第2個 flex item 的 flex-shrink: 2。

第1個 flex item 計算方式：
300(總共超過多少) x 1(第一個 flex item 的 flex-shrink，因為無設定，所以為預設值 1) x 260 (第一個 flex item 的 width) / 1560(總權重) = -50px

原本 260px - 50px = 210px = 第一個 flex item shrink 完的總寬度。
可以對照以下的圖片，第一個 flex item shrink 完的 width 真的是 210px。

那我們來計算第2個 flex item 真實的 width 為多少。

第2個 flex item 計算方式：
300(總共超過多少) x 2(第2個 flex item 的 flex-shrink: 2) x 260 (第2個 flex item 的 width) / 1560 (總權重) = -100px

原本 260px - 100px = 160px = 第2個 flex item shrink 完的總寬度。
可以對照以下的圖片，第2個 flex item shrink 完的 width 為 160px。

那麼 flex item 3 ~ flex item 5 都和 flex item 1 的計算方式一樣，這裡就不多贅述。

flex

為 flex-grow，flex-shrink，flex-basis 的縮寫，所以 flex: 0 0 200px 表示 flex-grow: 0，flex-shrink: 0，flex-basis: 200px。

常常看到網頁上寫 flex: 1，表示 flex: 1 1 0。