上篇「 淺談 Flex 排版外層屬性 」說到 flex 的外層屬性們，這篇來說說 flex 的內層屬性。

▲ 左方為外層屬性，右方為內層屬性。 圖片出處 : 六角學院 ▲

❒ Flex 內層屬性

flex

flex 為 flex-grow、flex-shrink、flex-basis 的縮寫。

flex: flex-grow flex-shrink flex-basis;

flex-grow 伸展比

子元素依比例伸展分配剩餘空間，在「 父元素空間充足時會有影響 」，預設為 0。

• flex-grow: 0; 預設，不會將空間分配給子元素。
• flex-grow: 1; 子元素會依比例進行伸展。
• CodePen 範例

flex-shrink 收縮比

子元素的壓縮比例分配 ， 在「 父完素空間不足時會有影響 」，預設為 1。

• flex-shrink: 0; 不會被壓縮。
• flex-shrink: 1; 預設，會被壓縮。
• CodePen 範例

flex-basis 預設大小

子元素預設被分配到的空間，預設為 auto。
CodePen 範例

order 排序

可改變子元素的排列順序，整數或負數皆可，數字越小排序越前。
Codepen 範例

align-self 單一個物件的次軸對齊

可調整子元素在次軸的對齊位置 ( 向 align-items )，如果已在父層下 align-items，但要對子層其中一個子元素調整對齊位置，可在那個子元素下 align-self 。
CodePen 範例

屬性值：

• auto | flex-start | flex-end | center | baseline | stretch

❒ Flex 運算

01. 父層寬度為 800px，子元素們寬度各為 300px,600px,100px，寬度依照比例來算會是多少呢 ?

依照比例來算 :

• .box1 : 800 px * ( 300 px /1000 px ) = 240 px
• .box2 : 800 px * ( 600 px /1000 px ) = 480 px
• .box3 : 800 px * ( 100 px /1000 px ) = 80 px
  CodePen 範例

資料來源

• Flex 空間分配 flex-grow / flex-shrink / flex-basis
• 六角文章 - flex-basis、flex-grow、flex-shrink 屬性介紹
• align-self 屬性介紹
• 圖解：CSS Flex 屬性一點也不難 / align-self
• Flex 遊戲
  • Flex pirate 新手關卡
  • Flex 青蛙