MUKI space*
Front-end Development,
Effective Note-Taking.
喜歡研究手帳術與時間管理，
寫過 WordPress 與手帳書籍的
CSS Flexbox 介紹與解析
Flexbox 是一種 CSS 排版語法，屬於 CSS3 新增內容，與傳統的 position、float、display 不同，具有更高的彈性，能解決複雜的排版問題。使用 flex 前，需在容器設置 display: flex，行內元素則用 display: inline-flex。Flexbox 的屬性分為影響容器與項目兩類，需注意屬性使用位置。
Flexbox 的核心屬性包含 flex-grow、flex-shrink、flex-basis，分別用來調整項目寬度、壓縮比例與初始尺寸。flex 是這三個屬性的合併縮寫。常見的應用有版面垂直置中、動態三欄式結構等，透過 flex 的屬性可靈活調整排版。...
我看過的原創小說一覽
看了多年大陸原創小說，特地紀錄以便日後查詢。分類依小說種類，並按閱讀順序排列，供書荒者參考。
女頻小說包括現代言情、古代言情、仙俠奇緣及遊戲競技；男頻小說有玄幻和仙俠。每本書都有劇情提及，怕被劇透者請勿繼續閱讀。分類參考起點網站，並註明男頻女頻，方便查詢。...
原生 CSS 的預處理器：Myth 介紹與使用
Myth 是一款 CSS 預處理器，與 SASS 和 LESS 類似，但使用的是原生 CSS 規範。由於瀏覽器尚未全面支援所有 CSS 規範，Myth 可以幫助編譯這些規範，未來支援後可直接移除 Myth 而不影響瀏覽。
安裝 Myth 後，可使用 npm 和 gulp 進行自動化編譯。將 CSS 檔案從 dev/ 編譯到 build/ 目錄下。也可結合 Compass 和 Myth 進行更高效的開發，實現自動化處理與編譯。...
inline element 與 padding 的二三事
設定元素為 `display: inline` 時，`padding-top` 和 `padding-bottom` 雖可使用，但不會推擠周圍 inline elements，反而會覆蓋其他元素。這與 `display: block` 的元素不同，因為 block 元素的 padding 會推擠下方元素。
範例顯示，inline 元素的 padding 不影響排版，可能造成困擾。因此，雖然技術上可行，但通常不建議使用 top 和 bottom padding。希望這篇文章能修正大家的觀念。...
蝙蝠俠對超人：正義曙光
蝙蝠俠決定前往大都會挑戰超人，因為超人大戰薩德將軍導致大都會毀壞。雙方交戰時，雷克斯路瑟出現，城市陷入新危機，迫使蝙蝠俠和超人合作。
觀影心得指出，電影前半段鋪陳過於冗長，節奏緩慢。神力女超人和反派雷克斯成為亮點。蝙蝠俠的夢境和閃電俠的出場讓人困惑，建議應做成彩蛋。小班飾演的蝙蝠俠表現不差，但缺乏獨立電影背景。...
原來，這只是兩個人的互相取暖
以為愛能改變一個人，願意為所愛之人做貼心的事，將他放在心中最深的位置。設身處地思考對方的難過，除了理性解決，還能感性地給予溫暖擁抱與貼心話語，讓對方知道在這世界上有你無條件支持。
以為愛能讓兩人成為一體，彼此感同身受，為對方著想。但最終發現，這只是自己的妄想。原來所謂的愛，只是寂寞中的互相陪伴，是兩人的互相取暖。...
SASS, LESS 退散，原生 CSS 可以使用變數啦！
CSS 現在支援原生變數，無需使用 SASS 或 LESS 等預處理器。變數的使用需要考慮瀏覽器的相容性，目前 Chrome 和 Firefox 已經支援。CSS 變數的基本語法與預處理器類似，需在 :root 或其他選擇器中定義，並使用 var() 呼叫。
變數可以在不同選擇器中繼承，並可在 RWD 設計中動態改變。CSS 變數亦可互相賦值，並可與 JavaScript 結合使用。使用 var() 時需注意規範，例如不能直接合併單位，需用 calc() 計算。CSS 變數的靈活性和可擴展性值得開發者關注和探索。...
