iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
自我挑戰組

JavaScript 30天 跟著一起做一遍!!!系列 第 5

[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


上一篇
[Day4] Array Cardio Day 1
下一篇
[Day6] Ajax Type Ahead
系列文
JavaScript 30天 跟著一起做一遍!!!30

尚未有邦友留言

立即登入留言