KuoMin's Blog
0%

CSS flex-gap、JS for雙迴圈，完成九九乘法表

Posted on Edited on
本篇文章為六角學院地下城1F關卡的實作筆記，會描述利用CSS:flex-gap和JS:for雙迴圈，完成與設計稿相同之九九乘法表。

本篇文章為六角學院地下城1F關卡的實作筆記，會描述利用CSS:flex-gap和JS:for雙迴圈，完成與設計稿相同之九九乘法表。

最終成本為1F_9X9


上圖為設計原稿

使用技術及觀念

  • CSS: Flex-gap
  • JS: 標籤樣版字
  • JS: for 雙迴圈

Outline

  • HTML 實作紀錄
  • CSS 實作紀錄
  • Flex-gap 介紹及應用說明
  • JS 實作紀錄

HTML 實作紀錄

切版結構如下，此版面須利用for迴圈印出相同2-9之版型，故須維持一致性。

CSS 實作紀錄

本次使用Display:Flex方式進行排版，可利用flex-wrap:wrap方式將版面排版，每個方塊內容也能依序排版，但撰寫過程中遇見疑問－如何設定div上下左右間的間隔？

起初，我想到為以下兩種方法，皆可達到設計圖需求。

  1. 使用Margin-bottom將兩段間隔計算出來並設定，但在最下層一排需額外調整Margin-bottom。

  2. 利用父層固定總長寬來限制子層排列，搭配justify-content: space-between使間隔調整至設計圖需求。(OS:有時候就是不想直接定出height)

但在調整版面過程中會出現許多魔幻數字，讓我不禁思考是否有其他方法可以直覺調整。

經過Mujing Tsai指點，flex於2021/06 提供gap屬性，其屬性是源自於grid，可設定box間距，且同時可以與justify-content: space-between搭配。

Flex-gap 介紹及應用說明

首先建立六個方塊(長寬為各100px)，放入總寬為350px之容器，透過flex-box設定
flex-wrap:wrap、justify-content: space-between，可達到以下結果。

HTML:

CSS:

Result:

此時加入，gap參數，其設定方法如下
設定一個參數為　左右上下相同；
設定兩個參數分別為　上下　左右；
其單位可使用px, %, em, calc

此時加入 gap:25px

Result:

但如果持續增加，超過原有寬度，則會為了符合justify-content: space-between，容器會再多換一行，結果如下：

將gap更改為30px

Result:

因此若要調整成兩行及上下間距增加，
可使用　gap: 40px 25px (上下、左右)

Result:

因此透過設定，也就可以針對設計圖中方塊的間隔去設定了

JS 實作紀錄

利用雙迴圈概念可分成round和item兩變數，透過for loop 逐漸將項目加上。

其程式碼如下:

1
2
3
4
5
6
7
8
9
10
11
12
for(let round=2; round<10; round++){
  content= ``
  for (let item=1; item<10; item++){
    content+= `<div class="cal-content">${round} × ${item} ＝ ${(item*round)}</div>`; 
  }
  str+=`<div class="cal" >
          <div class="cal-container">
          <div class="cal-title">${round}</div>
          ${content}
          </div>
        </div>`
}

搭配迴圈去渲染畫面，就可完成設計圖所需。

參考資料