附上為何鐵人賽文章會出現在這裡的說明：2022 鐵人賽｜Day1 報名失敗，還是要開賽吧！

背景脈絡

接續上篇～～

主題筆記

三、放在 Flex items 的 properties

通常用於排列「個別」的 item

order

把排列在一起的 items 想像成一條數線（…-2, -1, 0, 1, 2…），所有 items 一開始 order 的預設值為 0，是照著元素順序排列，我們可以透過給定其他數字值來幫助他們排列位置。

.

flex-grow

依照設定比例分配「剩餘空間」

• 預設值為0，代表即便有「剩餘空間」，得到的分配也為 0
  

• 當所有 items 的flex-grow合起來介於 0-1 時，剩餘空間將不會被分配完
  

.

flex-shrink

表示空間不夠時 item 的壓縮比例

• 預設值爲 1，表示空間不夠時，所有 items 預設都會以 1 的比例壓縮
• 若所有 items 的設定數值相同，代表壓縮比例相同，可實際壓縮大小未必相同，要根據 items 設定的寬度(主軸為row時)做計算。某 item 實際壓縮的大小公式為：
  container不夠的寬 * flex-shrink * 該item寬 / (所有item的寬 * 各自的flex-shrink，相加）

以下舉例：

container 寬度 1000px，粉色盒子 300px，綠色盒子 400px，藍色盒子 500px，
不夠空間總共爲 200px。

粉色 flex-shrink 爲 2，其餘 flex-shrink 爲預設值 1。

粉色盒子壓縮： 200 * 2 * 300(width) / (300 * 2 + 400 * 1 + 500 * 1)(總權重)= 80
綠色盒子壓縮： 200 * 1 * 400(width) / (300 * 2 + 400 * 1 + 500 * 1)(總權重)= 53.3
藍色盒子壓縮： 200 * 1 * 500(width) / (300 * 2 + 400 * 1 + 500 * 1)(總權重)= 66.6

粉盒子壓縮後爲 220px ；綠盒子壓縮後爲 346px ；藍盒子壓縮後爲 433px。

.

flex-basis

決定分配到的實際空間，功能類似 width (主軸為row時)，但優先程度較高，可以覆蓋 width

• 預設值為auto，可填入數字px，也可填入percent％

⚠️ 小小提醒，不要拼錯了！第一次使用時，我寫成 flex-basic，想說怎麼沒有效：）

.

flex

把 flex-grow, flex-shrink, flex-basis 寫在一起的精簡寫法！

flex: 0 1 auto /* 預設值 */

.

align-self

決定個別的 item 在交叉軸上的排列，優先程度較高，可以覆蓋align-items

• 預設值為auto，其他可填入的值同align-items

參考資料

。 W3School Flexbox
。 Day24 Flex 空間分配 flex-grow / flex-shrink / flex-basis
。 超推薦練習 flexbox 的好網站 ➡️ FLEXBOX FROGGY

以上是今天的分享，謝謝看完的你！

後記

在這邊要跟大家說..
由於最近身體出了點狀況，我必須退賽惹（土下座），感覺很不好意思，八天前才向各位遞上報名表，信誓旦旦地要發滿 30 天。因為是非常臨時決定參賽，也沒有庫存文章接續空窗期（每篇文章都是當天新鮮現打）（果汁？），雖然 2022鐵人賽 系列筆記文要告一個段落，但我並不會中斷前端學習，也還是會做筆記（只是自己看的就比較隨性），有機會就整理上來和大家分享！
.
十分感謝這幾天收到的鼓勵與交流，這幾天把筆記整理起來對該主題也理解的更清晰，有跨出第一步真是太好了！