[Day5] Flex Panels Image Gallery

CSS Flex box 的技巧

需要用到的技巧與練習目標

1. Flex (flex-grow | flex-shrink | flex-basis)
2. Flex-direction
3. transtion ( css )
4. transtioned ( js )
5. Array.prototype.includes()

Flex

flex-grow

Flex容器中，剩餘空間將該如何分配給項目。剩餘空間是指 容器大小減去所有Flex項目所剩下的空間。所以若是所以項目都有flex-grow則就會是剩餘空間根據flex-grow 的細數大小來進行分配。

flex-shrink

Flex-direction

Flex-direction語法格式有 row | row-reverse | column | column-reverse
主要為定義Flex容器中，定義主軸的方向，預設初始值為row。

• 如果 direction 屬性為 ltr ,row則為從左到右的定向水平軸。row-reverse則為由右到左的定向水平軸。如果 direction 屬性為 rtl 則為相反的狀況。

Array.prototype.includes()

includes() 方法會判斷一個陣列是否會包含特定元素，並取回傳 true 或是 false。

參考資料來源:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-grow
https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction
https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-direction
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Array/includes