[Day5] Flex Panels Image Gallery

[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