[{"data":1,"prerenderedAt":1630},["ShallowReactive",2],{"search-dialog-posts":3,"post-\u002Fposts\u002Fflexbox-notes":316,"post-surround-\u002Fposts\u002Fflexbox-notes":1623},[4,12,21,29,37,47,57,67,77,85,96,104,112,121,129,137,147,155,164,173,181,188,195,207,215,224,236,241,247,254,260,266,272,279,286,291,298,304,310],{"path":5,"title":6,"description":7,"category":8,"tags":9},"\u002Fposts\u002Fgit-commands-cheatsheet","Git 常用指令與終端機筆記","2018 年整理的 Git 學習筆記，包含基本終端機指令、Git 操作、分支、reset、SourceTree、Vim 與一些常用設定。","notes",[10,11],"Git","版本控制",{"path":13,"title":14,"description":15,"category":16,"tags":17},"\u002Fposts\u002Fjs-prototype-inheritance","JavaScript 物件導向：建構函式、prototype 與繼承三步驟","整理 ES5 時代用建構函式加 prototype 手刻物件導向的完整流程——封裝屬性與方法、共用函式為什麼要掛在 prototype 上、以及繼承的三個步驟（call 借用母類別建構子、Object.create 接上原型鏈、修正 constructor 指向），並附上物件縮寫與計算屬性這兩個順便學到的 ES6 寫法。","frontend",[18,19,20],"JavaScript","物件導向","prototype",{"path":22,"title":23,"description":24,"category":16,"tags":25},"\u002Fposts\u002Fflexbox-notes","Flexbox 對齊與彈性尺寸筆記","記錄 Flexbox 的主軸與交錯軸對齊、flex-direction、flex-wrap，以及 flex-grow、flex-shrink、flex-basis 等常用屬性。",[26,27,28],"CSS","Flexbox","版面",{"path":30,"title":31,"description":32,"category":16,"tags":33},"\u002Fposts\u002Fscreen-orientation-api","screen.orientation：現在判斷與鎖定螢幕方向的做法","整理現在 JavaScript 判斷螢幕方向的方式，包括 screen.orientation、change 事件與 lock()，並說明 RWD 使用 matchMedia 或 CSS orientation 會更適合。",[18,34,35,36],"RWD","螢幕方向","PWA",{"path":38,"title":39,"description":40,"category":16,"tags":41},"\u002Fposts\u002Fpinia-vuex-state-management","Pinia \u002F Vuex 狀態管理及差異","紀錄 Vuex、Pinia 的狀態管理概念、差異與用法。",[42,43,44,45,46],"Pinia","Vuex","Vue3","狀態管理","Nuxt",{"path":48,"title":49,"description":50,"category":8,"tags":51},"\u002Fposts\u002Fpyenv-python-version-management","Python 多版本管理 pyenv","紀錄 macOS 與 Windows 使用 pyenv 管理 Python 版本的方式。",[52,53,54,55,56],"Python","pyenv","macOS","Windows","版本管理",{"path":58,"title":59,"description":60,"category":8,"tags":61},"\u002Fposts\u002Fnpm-publish-vue2-component","npm 發布流程","紀錄 Vue 2 元件的 npm 發布、dist-tag 與打包流程。",[62,63,64,65,66],"npm","Vue2","Vue CLI","套件發布","MIT",{"path":68,"title":69,"description":70,"category":8,"tags":71},"\u002Fposts\u002Fmobile-debugging-today","現在怎麼 debug 手機網頁：從裝一堆工具到幾乎不用裝","對照 2022 年那套 scoop、iTunes、remotedebug-ios-webkit-adapter 的繁瑣設定，整理現在偵錯手機網頁的做法：Android 無線偵錯、iOS 的實際選項、on-device console、Playwright 裝置模擬，以及本機 HTTPS 的處理。",[72,73,74,75,76],"debug","iOS","Android","Chrome DevTools","Playwright",{"path":78,"title":79,"description":80,"category":16,"tags":81},"\u002Fposts\u002Fplaywright-vs-cypress","E2E 測試現在選什麼：Playwright 與 Cypress 的實際差異","對照幾年前用 Cypress 的做法，說明 Playwright 為什麼變成多數新專案的預設選擇：真正的多瀏覽器支援、免費的平行執行、trace viewer 除錯，以及兩者在架構上的根本差異與各自仍然適合的場景。",[76,82,83,84],"Cypress","E2E","測試",{"path":86,"title":87,"description":88,"category":89,"tags":90},"\u002Fposts\u002Fjs-encoding-today","現在處理編碼：TextEncoder、Uint8Array 的 Base64 方法與 URLSearchParams","整理 JavaScript 現代編碼方式，使用 TextEncoder、TextDecoder 與 Uint8Array 處理 UTF-8 與 Base64，並說明 Base64URL、URLSearchParams 與 encodeURIComponent 的差異。","research",[91,92,93,94,95,18],"編碼","TextEncoder","Base64","URLSearchParams","Uint8Array",{"path":97,"title":98,"description":99,"category":16,"tags":100},"\u002Fposts\u002Fdart-sass-migration","Dart Sass 遷移筆記：node-sass 之後怎麼裝 Sass","node-sass 與 LibSass 已停止維護，現在改用 Dart Sass。整理 webpack 與 Vite 的安裝方式，以及為什麼不再像 node-sass 一樣容易遇到 Node.js 版本與原生編譯問題。",[101,102,103],"Sass","Webpack","Vite",{"path":105,"title":106,"description":107,"category":16,"tags":108},"\u002Fposts\u002Fdayjs-vue3-computed","day.js 搭配 Vue 3 的日期格式化","整理 Vue 3 日期格式化的常見做法，使用 day.js 取代舊專案常見的 moment.js，並以 method 或 computed 取代 Vue 2 filter，也補充原生 Intl.DateTimeFormat 的使用方式。",[44,109,110,111],"day.js","日期","Intl",{"path":113,"title":114,"description":115,"category":16,"tags":116},"\u002Fposts\u002Fes-modules-today","ES Module 現在的樣子：Node ESM、exports 與 import maps","整理現代 JavaScript ES Module 的常見用法，包括 Node.js 原生 ESM、package.json exports、瀏覽器 import maps、JSON import attributes，以及 Vite 動態載入的注意事項。",[117,118,119,120,103,18],"ES Module","Node.js","import maps","exports",{"path":122,"title":123,"description":124,"category":89,"tags":125},"\u002Fposts\u002Fstructured-clone","structuredClone()：終於有內建的深層拷貝","整理 JavaScript structuredClone() 的深層拷貝用法，說明 Date、Map、Set、循環參考的處理方式，以及 Function、class 與 Vue reactive Proxy 的注意事項。",[18,126,127,128],"structuredClone","深拷貝","Vue",{"path":130,"title":131,"description":132,"category":16,"tags":133},"\u002Fposts\u002Fdynamic-import","JavaScript 動態載入：import() 與 Vue 非同步元件","整理靜態 import、動態 import() 與 Vue defineAsyncComponent 的使用方式，並簡單補充 Vite import.meta.glob 的用途。",[18,134,135,103,136],"ES Modules","Vue 3","Code Splitting",{"path":138,"title":139,"description":140,"category":16,"tags":141},"\u002Fposts\u002Fscreen-wake-lock-api","Screen Wake Lock API：不用套件也能讓頁面保持亮著","整理 Screen Wake Lock API 的基本用法，說明 HTTPS、頁面可見性、切換分頁後重新取得 wake lock，以及 Vue／Nuxt 計時器使用時的注意事項。",[142,128,143,144,145,146],"Wake Lock","Nuxt4","行動裝置","計時器","Web API",{"path":148,"title":149,"description":150,"category":16,"tags":151},"\u002Fposts\u002Fhtml-meta-boilerplate-today","現在的 HTML meta 標籤怎麼寫","整理現在一個新頁面該有的 meta 標籤骨架——viewport 補上 viewport-fit=cover 因應瀏海與圓角螢幕、color-scheme 讓表單控制項跟著深色模式換色、theme-color 決定行動瀏覽器工具列顏色，以及基本的 SEO 與 Open Graph 標籤。",[152,153,154],"HTML","meta","SEO",{"path":156,"title":157,"description":158,"category":8,"tags":159},"\u002Fposts\u002Fdocker-node-postgres","把 Node + PostgreSQL 的 backend 裝進 Docker：Dockerfile、.dockerignore 與 compose","從「本機裝了就跑」到打包成容器的通用做法——Dockerfile 每一行的理由與 layer cache 為什麼決定了指令順序、.dockerignore 漏掉 node_modules 對原生模組是災難級的問題、容器之間為什麼不能用 localhost 互相找到對方，以及怎麼驗證資料真的寫進了 volume。",[160,161,118,162,163],"Docker","Docker Compose","PostgreSQL","Express",{"path":165,"title":166,"description":167,"category":16,"tags":168},"\u002Fposts\u002Fnuxt-server-proxy","Nuxt 3 \u002F 4 用 Server API 做代理與轉發","整理 Nuxt 3 與 Nuxt 4 使用 server\u002Fapi 轉發第三方 API 的方式，可以避免瀏覽器 CORS 問題、隱藏 API Key，也能在伺服器端加入快取。",[169,143,170,171,172],"Nuxt3","CORS","Nitro","API",{"path":174,"title":175,"description":176,"category":16,"tags":177},"\u002Fposts\u002Fnuxt4-project-setup","Nuxt 4 建立專案：和 Nuxt 3 有哪些不同","整理 Nuxt 4 建立專案的基本流程與目錄結構，並對照 Nuxt 3 的差異，包括 app\u002F 目錄、路徑別名、TypeScript，以及目前常用的 ESLint 與 Tailwind CSS 4 設定。",[143,44,178,179,180],"TypeScript","ESLint","Tailwind CSS 4",{"path":182,"title":183,"description":184,"category":16,"tags":185},"\u002Fposts\u002Fnuxt3-route-middleware","Nuxt 3 \u002F 4 的 Route Middleware：進頁面前先做判斷","整理 Nuxt 3 與 Nuxt 4 的 Route Middleware，用 defineNuxtRouteMiddleware 在進入頁面前檢查登入狀態，搭配 navigateTo 重新導向，並說明一般 middleware、global middleware 與 definePageMeta 的用法。",[169,143,186,187],"Middleware","驗證",{"path":189,"title":190,"description":191,"category":16,"tags":192},"\u002Fposts\u002Fnuxt-route-rules-redirect","Nuxt 3 \u002F 4 的 routeRules：重新導向與頁面設定","整理 Nuxt 3 與 Nuxt 4 的 routeRules 用法，可以依照不同網址設定重新導向、預渲染、SSR 與快取，並簡單對照 Nuxt 2 的舊做法。",[169,143,193,194],"routeRules","重新導向",{"path":196,"title":197,"description":198,"category":16,"tags":199},"\u002Fposts\u002Fios-iframe-google-login-blank-page","iOS iframe 串接 Google 登入出現空白頁：Popup 與頁面回收問題排查紀錄","記錄 iframe 內串接 Google 第三方登入時，部分 iOS 裝置因背景頁面遭到回收並重新載入，導致 Popup 登入流程中斷，以及最後透過 Redirect 分流與登入狀態接回機制處理的過程。",[73,200,201,202,203,204,205,206],"Safari","iframe","Google Login","GIS","OAuth","Popup","Redirect",{"path":208,"title":209,"description":210,"category":16,"tags":211},"\u002Fposts\u002Fios-login-tab-return-behavior","iOS 第三方登入後回不到原頁？分頁開啟關係與回頁行為實測","記錄 iOS Safari 與 Chrome 在多分頁第三方登入流程中，登入頁關閉後不一定回到原頁的實測，以及分頁開啟關係、window.close 與 window.focus 的限制。",[73,200,212,202,204,201,213,214],"Chrome","window.close","window.focus",{"path":216,"title":217,"description":218,"category":16,"tags":219},"\u002Fposts\u002Fgoogle-app-about-blank-placeholder","Google App 內建瀏覽器：about:blank 佔位頁被關閉的排查紀錄","記錄 iOS Google App 內建瀏覽器在非同步開啟外部頁面時，about:blank 佔位分頁被自動關閉，導致第三方登入或外部導轉失敗的排查與解法。",[73,220,221,222,204,223],"Google App","window.open","about:blank","WebView",{"path":225,"title":226,"description":227,"category":228,"tags":229},"\u002Fposts\u002Fclaude-code-codex-cli-init-basics","AI 相關紀錄 v1｜Claude Code \u002F Codex CLI 初始化與基本概念","從 Claude Code 與 Codex CLI 開始，整理 CLI、Coding Agent、Context、\u002Finit 與 CLAUDE.md／AGENTS.md 這幾個一開始最容易搞混的概念，以及在既有專案中的安裝與啟動方式。","ai",[230,231,232,233,234,235],"AI","Claude Code","Codex CLI","Coding Agent","CLAUDE.md","AGENTS.md",{"path":237,"title":238,"description":239,"category":228,"tags":240},"\u002Fposts\u002Fclaude-agents-md-project-guidelines","AI 相關紀錄 v2｜CLAUDE.md \u002F AGENTS.md 怎麼寫？專案規範與實際範例","整理 CLAUDE.md 與 AGENTS.md 的用途、適合記錄的專案規範，以及可直接參考的設定範例。",[230,231,232,234,235],{"path":242,"title":243,"description":244,"category":228,"tags":245},"\u002Fposts\u002Fclaude-codex-config-locations","AI 相關紀錄 v3｜Claude Code `.claude\u002F` \u002F Codex CLI 設定位置：全域與專案設定基本概要介紹","整理 Claude Code 與 Codex CLI 的使用者層級、專案層級設定位置，以及 rules、skills、agents 等目錄的用途。",[230,231,232,246],"設定檔",{"path":248,"title":249,"description":250,"category":228,"tags":251},"\u002Fposts\u002Fclaude-settings-codex-config","AI 相關紀錄 v4｜Claude Code settings \u002F Codex config 基本設定","整理 Claude Code settings.json 與 Codex config.toml 的設定層級、權限控制和常見基本設定。",[230,231,232,252,253],"settings.json","config.toml",{"path":255,"title":256,"description":257,"category":228,"tags":258},"\u002Fposts\u002Fclaude-codex-rules-structure","AI 相關紀錄 v5｜Rules：專案規則多了之後怎麼拆？","整理 Claude Code Rules 與 Codex AGENTS.md 的拆分方式，說明何時該拆、怎麼依目錄管理專案規則。",[230,231,232,259,235],"Rules",{"path":261,"title":262,"description":263,"category":228,"tags":264},"\u002Fposts\u002Fclaude-codex-slash-commands","AI 相關紀錄 v6｜Commands \u002F Slash Commands：CLI 裡的 `\u002F` 指令是什麼？","介紹 Claude Code 與 Codex CLI 的 Slash Commands，整理常用內建指令、自訂指令與 Skills 的差異。",[230,231,232,265],"Slash Commands",{"path":267,"title":268,"description":269,"category":228,"tags":270},"\u002Fposts\u002Fclaude-codex-skills","AI 相關紀錄 v7｜Skills：把重複工作流程整理起來","介紹 Claude Code 與 Codex Skills，整理適合保存成 Skill 的重複流程、基本結構與使用方式。",[230,231,232,271],"Skills",{"path":273,"title":274,"description":275,"category":228,"tags":276},"\u002Fposts\u002Fclaude-codex-agents-subagents","AI 相關紀錄 v8｜Agent \u002F Subagent：什麼時候真的需要分工？","整理 Agent、Subagent 與 Custom Agent 的用途，說明何時適合分工，以及它們和 Rules、Skills 的差異。",[230,231,232,277,278],"Agent","Subagent",{"path":280,"title":281,"description":282,"category":228,"tags":283},"\u002Fposts\u002Fmcp-basics","AI 相關紀錄 v9｜MCP：讓 AI 使用其他工具與資料","介紹 MCP 如何讓 AI 使用外部工具與資料，並以 Pencil MCP 說明實際用途、權限風險及與 Skill 的差異。",[230,284,231,232,285],"MCP","Pencil",{"path":287,"title":288,"description":289,"category":228,"tags":290},"\u002Fposts\u002Fai-coding-agent-concepts-summary","AI 相關紀錄 v10｜基本概念小結論","用一篇快速整理 CLAUDE.md、AGENTS.md、設定檔、Rules、Commands、Skills、Agent 與 MCP 的角色和差異。",[230,231,232,284,271,277],{"path":292,"title":293,"description":294,"category":228,"tags":295},"\u002Fposts\u002Fclaude-code-codex-model-selection","Claude Code 與 Codex：不同模型怎麼選？","比較 Claude Code 與 Codex 不同模型的速度、能力與成本取捨，依工作難度整理實用的選擇方向。",[230,231,296,297],"Codex","模型選擇",{"path":299,"title":300,"description":301,"category":228,"tags":302},"\u002Fposts\u002Fclaude-model-selection","Claude 模型簡單怎麼選？","整理 Claude 各模型在速度、能力與使用情境上的差異，提供從輕量工作到複雜任務的選擇方向。",[230,231,303,297],"Claude",{"path":305,"title":306,"description":307,"category":228,"tags":308},"\u002Fposts\u002Fcodex-model-selection","Codex 模型簡單怎麼選？","整理 Codex 各模型在速度、能力與使用情境上的差異，提供從簡單修改到大型端到端任務的選擇方向。",[230,296,309,297],"OpenAI",{"path":311,"title":312,"description":313,"category":228,"tags":314},"\u002Fposts\u002Fclaude-code-codex-cli-command-cheatsheet","Claude Code \u002F Codex CLI 常用指令速查表","整理 Claude Code 與 Codex CLI 的常用斜線指令、快捷操作與進階功能，方便需要時快速查找。",[230,231,232,265,315],"速查表",{"id":317,"title":23,"body":318,"category":16,"description":24,"draft":1612,"extension":1613,"image":1614,"meta":1615,"navigation":1415,"path":22,"publishedAt":1616,"relatedExperiments":1617,"seo":1618,"stem":1619,"tags":1620,"updatedAt":1621,"__hash__":1622},"posts\u002Fposts\u002F20201025.flexbox-notes.md",{"type":319,"value":320,"toc":1582},"minimark",[321,325,329,335,339,395,402,405,440,446,449,484,490,493,528,534,537,572,578,581,589,616,621,625,628,653,656,688,691,702,705,735,738,776,778,802,804,807,810,818,820,826,832,835,838,844,846,851,853,856,873,876,879,904,906,909,934,936,939,964,967,972,999,1002,1026,1029,1032,1037,1063,1068,1071,1076,1107,1110,1136,1140,1144,1149,1155,1158,1181,1183,1214,1217,1223,1229,1259,1262,1267,1293,1296,1322,1328,1331,1334,1484,1487,1499,1502,1508,1532,1535,1539,1542,1561,1573,1578],[322,323,324],"p",{},"這篇是當時練習 Flexbox 時整理的屬性與對齊方式筆記。",[326,327,328],"h2",{"id":328},"align-items",[322,330,331,334],{},[332,333,328],"code",{}," 用來設定 Flex Item 在**交錯軸（Cross Axis）**上的對齊方式。",[336,337,338],"h3",{"id":338},"flex-start",[340,341,346],"pre",{"className":342,"code":343,"language":344,"meta":345,"style":345},"language-css shiki shiki-themes github-light github-dark-default",".container {\n  display: flex;\n  align-items: flex-start;\n}\n","css","",[332,347,348,361,377,389],{"__ignoreMap":345},[349,350,353,357],"span",{"class":351,"line":352},"line",1,[349,354,356],{"class":355},"syv4q",".container",[349,358,360],{"class":359},"szmH1"," {\n",[349,362,364,368,371,374],{"class":351,"line":363},2,[349,365,367],{"class":366},"sPgVT","  display",[349,369,370],{"class":359},": ",[349,372,373],{"class":366},"flex",[349,375,376],{"class":359},";\n",[349,378,380,383,385,387],{"class":351,"line":379},3,[349,381,382],{"class":366},"  align-items",[349,384,370],{"class":359},[349,386,338],{"class":366},[349,388,376],{"class":359},[349,390,392],{"class":351,"line":391},4,[349,393,394],{"class":359},"}\n",[322,396,397],{},[398,399],"img",{"alt":400,"src":401},"align-items flex-start","\u002Fimages\u002F20201025_01.jpg",[336,403,404],{"id":404},"center",[340,406,408],{"className":342,"code":407,"language":344,"meta":345,"style":345},".container {\n  display: flex;\n  align-items: center;\n}\n",[332,409,410,416,426,436],{"__ignoreMap":345},[349,411,412,414],{"class":351,"line":352},[349,413,356],{"class":355},[349,415,360],{"class":359},[349,417,418,420,422,424],{"class":351,"line":363},[349,419,367],{"class":366},[349,421,370],{"class":359},[349,423,373],{"class":366},[349,425,376],{"class":359},[349,427,428,430,432,434],{"class":351,"line":379},[349,429,382],{"class":366},[349,431,370],{"class":359},[349,433,404],{"class":366},[349,435,376],{"class":359},[349,437,438],{"class":351,"line":391},[349,439,394],{"class":359},[322,441,442],{},[398,443],{"alt":444,"src":445},"align-items center","\u002Fimages\u002F20201025_02.jpg",[336,447,448],{"id":448},"stretch",[340,450,452],{"className":342,"code":451,"language":344,"meta":345,"style":345},".container {\n  display: flex;\n  align-items: stretch;\n}\n",[332,453,454,460,470,480],{"__ignoreMap":345},[349,455,456,458],{"class":351,"line":352},[349,457,356],{"class":355},[349,459,360],{"class":359},[349,461,462,464,466,468],{"class":351,"line":363},[349,463,367],{"class":366},[349,465,370],{"class":359},[349,467,373],{"class":366},[349,469,376],{"class":359},[349,471,472,474,476,478],{"class":351,"line":379},[349,473,382],{"class":366},[349,475,370],{"class":359},[349,477,448],{"class":366},[349,479,376],{"class":359},[349,481,482],{"class":351,"line":391},[349,483,394],{"class":359},[322,485,486],{},[398,487],{"alt":488,"src":489},"align-items stretch","\u002Fimages\u002F20201025_03.jpg",[336,491,492],{"id":492},"flex-end",[340,494,496],{"className":342,"code":495,"language":344,"meta":345,"style":345},".container {\n  display: flex;\n  align-items: flex-end;\n}\n",[332,497,498,504,514,524],{"__ignoreMap":345},[349,499,500,502],{"class":351,"line":352},[349,501,356],{"class":355},[349,503,360],{"class":359},[349,505,506,508,510,512],{"class":351,"line":363},[349,507,367],{"class":366},[349,509,370],{"class":359},[349,511,373],{"class":366},[349,513,376],{"class":359},[349,515,516,518,520,522],{"class":351,"line":379},[349,517,382],{"class":366},[349,519,370],{"class":359},[349,521,492],{"class":366},[349,523,376],{"class":359},[349,525,526],{"class":351,"line":391},[349,527,394],{"class":359},[322,529,530],{},[398,531],{"alt":532,"src":533},"align-items flex-end","\u002Fimages\u002F20201025_04.jpg",[336,535,536],{"id":536},"baseline",[340,538,540],{"className":342,"code":539,"language":344,"meta":345,"style":345},".container {\n  display: flex;\n  align-items: baseline;\n}\n",[332,541,542,548,558,568],{"__ignoreMap":345},[349,543,544,546],{"class":351,"line":352},[349,545,356],{"class":355},[349,547,360],{"class":359},[349,549,550,552,554,556],{"class":351,"line":363},[349,551,367],{"class":366},[349,553,370],{"class":359},[349,555,373],{"class":366},[349,557,376],{"class":359},[349,559,560,562,564,566],{"class":351,"line":379},[349,561,382],{"class":366},[349,563,370],{"class":359},[349,565,536],{"class":366},[349,567,376],{"class":359},[349,569,570],{"class":351,"line":391},[349,571,394],{"class":359},[322,573,574],{},[398,575],{"alt":576,"src":577},"align-items baseline","\u002Fimages\u002F20201025_05.jpg",[326,579,580],{"id":580},"align-self",[322,582,583,585,586,588],{},[332,584,580],{}," 可以單獨設定某一個 Flex Item 在交錯軸上的對齊方式，覆蓋父層的 ",[332,587,328],{},"。",[340,590,592],{"className":342,"code":591,"language":344,"meta":345,"style":345},".item {\n  align-self: center;\n}\n",[332,593,594,601,612],{"__ignoreMap":345},[349,595,596,599],{"class":351,"line":352},[349,597,598],{"class":355},".item",[349,600,360],{"class":359},[349,602,603,606,608,610],{"class":351,"line":363},[349,604,605],{"class":366},"  align-self",[349,607,370],{"class":359},[349,609,404],{"class":366},[349,611,376],{"class":359},[349,613,614],{"class":351,"line":379},[349,615,394],{"class":359},[322,617,618],{},[398,619],{"alt":580,"src":620},"\u002Fimages\u002F20201025_06.jpg",[326,622,624],{"id":623},"flexbox-的主軸與交錯軸","Flexbox 的主軸與交錯軸",[322,626,627],{},"啟用 Flexbox：",[340,629,631],{"className":342,"code":630,"language":344,"meta":345,"style":345},".container {\n  display: flex;\n}\n",[332,632,633,639,649],{"__ignoreMap":345},[349,634,635,637],{"class":351,"line":352},[349,636,356],{"class":355},[349,638,360],{"class":359},[349,640,641,643,645,647],{"class":351,"line":363},[349,642,367],{"class":366},[349,644,370],{"class":359},[349,646,373],{"class":366},[349,648,376],{"class":359},[349,650,651],{"class":351,"line":379},[349,652,394],{"class":359},[322,654,655],{},"幾個常用屬性：",[657,658,659,666,672,678,683],"ul",{},[660,661,662,665],"li",{},[332,663,664],{},"flex-direction","：決定主軸的方向",[660,667,668,671],{},[332,669,670],{},"flex-wrap","：決定項目是否換行",[660,673,674,677],{},[332,675,676],{},"justify-content","：設定主軸上的對齊方式",[660,679,680,682],{},[332,681,328],{},"：設定交錯軸上的對齊方式",[660,684,685,687],{},[332,686,580],{},"：設定單一項目的交錯軸對齊",[326,689,690],{"id":690},"flex-flow",[322,692,693,695,696,698,699,701],{},[332,694,690],{}," 是 ",[332,697,664],{}," 與 ",[332,700,670],{}," 的縮寫。",[322,703,704],{},"例如：",[340,706,708],{"className":342,"code":707,"language":344,"meta":345,"style":345},".container {\n  flex-flow: row wrap;\n}\n",[332,709,710,716,731],{"__ignoreMap":345},[349,711,712,714],{"class":351,"line":352},[349,713,356],{"class":355},[349,715,360],{"class":359},[349,717,718,721,723,726,729],{"class":351,"line":363},[349,719,720],{"class":366},"  flex-flow",[349,722,370],{"class":359},[349,724,725],{"class":366},"row",[349,727,728],{"class":366}," wrap",[349,730,376],{"class":359},[349,732,733],{"class":351,"line":379},[349,734,394],{"class":359},[322,736,737],{},"等同：",[340,739,741],{"className":342,"code":740,"language":344,"meta":345,"style":345},".container {\n  flex-direction: row;\n  flex-wrap: wrap;\n}\n",[332,742,743,749,760,772],{"__ignoreMap":345},[349,744,745,747],{"class":351,"line":352},[349,746,356],{"class":355},[349,748,360],{"class":359},[349,750,751,754,756,758],{"class":351,"line":363},[349,752,753],{"class":366},"  flex-direction",[349,755,370],{"class":359},[349,757,725],{"class":366},[349,759,376],{"class":359},[349,761,762,765,767,770],{"class":351,"line":379},[349,763,764],{"class":366},"  flex-wrap",[349,766,370],{"class":359},[349,768,769],{"class":366},"wrap",[349,771,376],{"class":359},[349,773,774],{"class":351,"line":391},[349,775,394],{"class":359},[326,777,664],{"id":664},[340,779,781],{"className":342,"code":780,"language":344,"meta":345,"style":345},"flex-direction: row | row-reverse | column | column-reverse;\n",[332,782,783],{"__ignoreMap":345},[349,784,785,788,791,794,797,800],{"class":351,"line":352},[349,786,664],{"class":787},"sXQ1o",[349,789,790],{"class":359},": row | ",[349,792,793],{"class":787},"row-reverse",[349,795,796],{"class":359}," | column | ",[349,798,799],{"class":787},"column-reverse",[349,801,376],{"class":359},[336,803,725],{"id":725},[322,805,806],{},"預設值。",[322,808,809],{},"一般由左到右排列：",[340,811,816],{"className":812,"code":814,"language":815,"meta":345},[813],"language-text","1 → 2 → 3\n","text",[332,817,814],{"__ignoreMap":345},[336,819,793],{"id":793},[322,821,822,823,825],{},"與 ",[332,824,725],{}," 相反：",[340,827,830],{"className":828,"code":829,"language":815,"meta":345},[813],"3 ← 2 ← 1\n",[332,831,829],{"__ignoreMap":345},[336,833,834],{"id":834},"column",[322,836,837],{},"將主軸改成垂直方向，由上往下排列。",[340,839,842],{"className":840,"code":841,"language":815,"meta":345},[813],"1\n↓\n2\n↓\n3\n",[332,843,841],{"__ignoreMap":345},[336,845,799],{"id":799},[322,847,822,848,850],{},[332,849,834],{}," 相反，由下往上排列。",[326,852,670],{"id":670},[322,854,855],{},"控制 Flex Item 是否換行。",[340,857,859],{"className":342,"code":858,"language":344,"meta":345,"style":345},"flex-wrap: nowrap | wrap | wrap-reverse;\n",[332,860,861],{"__ignoreMap":345},[349,862,863,865,868,871],{"class":351,"line":352},[349,864,670],{"class":787},[349,866,867],{"class":359},": nowrap | wrap | ",[349,869,870],{"class":787},"wrap-reverse",[349,872,376],{"class":359},[336,874,875],{"id":875},"nowrap",[322,877,878],{},"預設值，不換行。",[340,880,882],{"className":342,"code":881,"language":344,"meta":345,"style":345},".container {\n  flex-wrap: nowrap;\n}\n",[332,883,884,890,900],{"__ignoreMap":345},[349,885,886,888],{"class":351,"line":352},[349,887,356],{"class":355},[349,889,360],{"class":359},[349,891,892,894,896,898],{"class":351,"line":363},[349,893,764],{"class":366},[349,895,370],{"class":359},[349,897,875],{"class":366},[349,899,376],{"class":359},[349,901,902],{"class":351,"line":379},[349,903,394],{"class":359},[336,905,769],{"id":769},[322,907,908],{},"空間不足時換到下一行。",[340,910,912],{"className":342,"code":911,"language":344,"meta":345,"style":345},".container {\n  flex-wrap: wrap;\n}\n",[332,913,914,920,930],{"__ignoreMap":345},[349,915,916,918],{"class":351,"line":352},[349,917,356],{"class":355},[349,919,360],{"class":359},[349,921,922,924,926,928],{"class":351,"line":363},[349,923,764],{"class":366},[349,925,370],{"class":359},[349,927,769],{"class":366},[349,929,376],{"class":359},[349,931,932],{"class":351,"line":379},[349,933,394],{"class":359},[336,935,870],{"id":870},[322,937,938],{},"同樣會換行，但是交錯軸的排列方向相反。",[340,940,942],{"className":342,"code":941,"language":344,"meta":345,"style":345},".container {\n  flex-wrap: wrap-reverse;\n}\n",[332,943,944,950,960],{"__ignoreMap":345},[349,945,946,948],{"class":351,"line":352},[349,947,356],{"class":355},[349,949,360],{"class":359},[349,951,952,954,956,958],{"class":351,"line":363},[349,953,764],{"class":366},[349,955,370],{"class":359},[349,957,870],{"class":366},[349,959,376],{"class":359},[349,961,962],{"class":351,"line":379},[349,963,394],{"class":359},[326,965,966],{"id":966},"flex-grow",[322,968,969,971],{},[332,970,966],{}," 設定當容器還有剩餘空間時，各個 Flex Item 可以分配多少比例。",[340,973,975],{"className":342,"code":974,"language":344,"meta":345,"style":345},".item {\n  flex-grow: 1;\n}\n",[332,976,977,983,995],{"__ignoreMap":345},[349,978,979,981],{"class":351,"line":352},[349,980,598],{"class":355},[349,982,360],{"class":359},[349,984,985,988,990,993],{"class":351,"line":363},[349,986,987],{"class":366},"  flex-grow",[349,989,370],{"class":359},[349,991,992],{"class":366},"1",[349,994,376],{"class":359},[349,996,997],{"class":351,"line":379},[349,998,394],{"class":359},[322,1000,1001],{},"例如三個 Item 都設定：",[340,1003,1004],{"className":342,"code":974,"language":344,"meta":345,"style":345},[332,1005,1006,1012,1022],{"__ignoreMap":345},[349,1007,1008,1010],{"class":351,"line":352},[349,1009,598],{"class":355},[349,1011,360],{"class":359},[349,1013,1014,1016,1018,1020],{"class":351,"line":363},[349,1015,987],{"class":366},[349,1017,370],{"class":359},[349,1019,992],{"class":366},[349,1021,376],{"class":359},[349,1023,1024],{"class":351,"line":379},[349,1025,394],{"class":359},[322,1027,1028],{},"剩餘空間就會依相同比例分配。",[326,1030,1031],{"id":1031},"flex-shrink",[322,1033,1034,1036],{},[332,1035,1031],{}," 設定容器空間不足時，Flex Item 的收縮比例。",[340,1038,1040],{"className":342,"code":1039,"language":344,"meta":345,"style":345},".item {\n  flex-shrink: 1;\n}\n",[332,1041,1042,1048,1059],{"__ignoreMap":345},[349,1043,1044,1046],{"class":351,"line":352},[349,1045,598],{"class":355},[349,1047,360],{"class":359},[349,1049,1050,1053,1055,1057],{"class":351,"line":363},[349,1051,1052],{"class":366},"  flex-shrink",[349,1054,370],{"class":359},[349,1056,992],{"class":366},[349,1058,376],{"class":359},[349,1060,1061],{"class":351,"line":379},[349,1062,394],{"class":359},[322,1064,1065,1066,588],{},"預設值是 ",[332,1067,992],{},[326,1069,1070],{"id":1070},"flex-basis",[322,1072,1073,1075],{},[332,1074,1070],{}," 設定 Flex Item 在主軸上的初始尺寸。",[340,1077,1079],{"className":342,"code":1078,"language":344,"meta":345,"style":345},".item {\n  flex-basis: 200px;\n}\n",[332,1080,1081,1087,1103],{"__ignoreMap":345},[349,1082,1083,1085],{"class":351,"line":352},[349,1084,598],{"class":355},[349,1086,360],{"class":359},[349,1088,1089,1092,1094,1097,1101],{"class":351,"line":363},[349,1090,1091],{"class":366},"  flex-basis",[349,1093,370],{"class":359},[349,1095,1096],{"class":366},"200",[349,1098,1100],{"class":1099},"sDgYj","px",[349,1102,376],{"class":359},[349,1104,1105],{"class":351,"line":379},[349,1106,394],{"class":359},[322,1108,1109],{},"也可以使用：",[340,1111,1113],{"className":342,"code":1112,"language":344,"meta":345,"style":345},".item {\n  flex-basis: auto;\n}\n",[332,1114,1115,1121,1132],{"__ignoreMap":345},[349,1116,1117,1119],{"class":351,"line":352},[349,1118,598],{"class":355},[349,1120,360],{"class":359},[349,1122,1123,1125,1127,1130],{"class":351,"line":363},[349,1124,1091],{"class":366},[349,1126,370],{"class":359},[349,1128,1129],{"class":366},"auto",[349,1131,376],{"class":359},[349,1133,1134],{"class":351,"line":379},[349,1135,394],{"class":359},[322,1137,1065,1138,588],{},[332,1139,1129],{},[326,1141,1143],{"id":1142},"flex-縮寫","flex 縮寫",[322,1145,1146,1148],{},[332,1147,373],{}," 可以一次設定：",[340,1150,1153],{"className":1151,"code":1152,"language":815,"meta":345},[813],"flex-grow\nflex-shrink\nflex-basis\n",[332,1154,1152],{"__ignoreMap":345},[322,1156,1157],{},"格式：",[340,1159,1161],{"className":342,"code":1160,"language":344,"meta":345,"style":345},".item {\n  flex: flex-grow flex-shrink flex-basis;\n}\n",[332,1162,1163,1169,1177],{"__ignoreMap":345},[349,1164,1165,1167],{"class":351,"line":352},[349,1166,598],{"class":355},[349,1168,360],{"class":359},[349,1170,1171,1174],{"class":351,"line":363},[349,1172,1173],{"class":366},"  flex",[349,1175,1176],{"class":359},": flex-grow flex-shrink flex-basis;\n",[349,1178,1179],{"class":351,"line":379},[349,1180,394],{"class":359},[322,1182,704],{},[340,1184,1186],{"className":342,"code":1185,"language":344,"meta":345,"style":345},".item {\n  flex: 1 1 auto;\n}\n",[332,1187,1188,1194,1210],{"__ignoreMap":345},[349,1189,1190,1192],{"class":351,"line":352},[349,1191,598],{"class":355},[349,1193,360],{"class":359},[349,1195,1196,1198,1200,1202,1205,1208],{"class":351,"line":363},[349,1197,1173],{"class":366},[349,1199,370],{"class":359},[349,1201,992],{"class":366},[349,1203,1204],{"class":366}," 1",[349,1206,1207],{"class":366}," auto",[349,1209,376],{"class":359},[349,1211,1212],{"class":351,"line":379},[349,1213,394],{"class":359},[322,1215,1216],{},"三個屬性的初始值分別是：",[340,1218,1221],{"className":1219,"code":1220,"language":815,"meta":345},[813],"flex-grow: 0\nflex-shrink: 1\nflex-basis: auto\n",[332,1222,1220],{"__ignoreMap":345},[322,1224,1225,1226,1228],{},"因此 ",[332,1227,373],{}," 的初始值相當於：",[340,1230,1232],{"className":342,"code":1231,"language":344,"meta":345,"style":345},".item {\n  flex: 0 1 auto;\n}\n",[332,1233,1234,1240,1255],{"__ignoreMap":345},[349,1235,1236,1238],{"class":351,"line":352},[349,1237,598],{"class":355},[349,1239,360],{"class":359},[349,1241,1242,1244,1246,1249,1251,1253],{"class":351,"line":363},[349,1243,1173],{"class":366},[349,1245,370],{"class":359},[349,1247,1248],{"class":366},"0",[349,1250,1204],{"class":366},[349,1252,1207],{"class":366},[349,1254,376],{"class":359},[349,1256,1257],{"class":351,"line":379},[349,1258,394],{"class":359},[326,1260,1261],{"id":1261},"order",[322,1263,1264,1266],{},[332,1265,1261],{}," 可以改變 Flex Item 的顯示順序。",[340,1268,1270],{"className":342,"code":1269,"language":344,"meta":345,"style":345},".item {\n  order: 1;\n}\n",[332,1271,1272,1278,1289],{"__ignoreMap":345},[349,1273,1274,1276],{"class":351,"line":352},[349,1275,598],{"class":355},[349,1277,360],{"class":359},[349,1279,1280,1283,1285,1287],{"class":351,"line":363},[349,1281,1282],{"class":366},"  order",[349,1284,370],{"class":359},[349,1286,992],{"class":366},[349,1288,376],{"class":359},[349,1290,1291],{"class":351,"line":379},[349,1292,394],{"class":359},[322,1294,1295],{},"數字越小會排得越前面，也可以使用負數：",[340,1297,1299],{"className":342,"code":1298,"language":344,"meta":345,"style":345},".item {\n  order: -1;\n}\n",[332,1300,1301,1307,1318],{"__ignoreMap":345},[349,1302,1303,1305],{"class":351,"line":352},[349,1304,598],{"class":355},[349,1306,360],{"class":359},[349,1308,1309,1311,1313,1316],{"class":351,"line":363},[349,1310,1282],{"class":366},[349,1312,370],{"class":359},[349,1314,1315],{"class":366},"-1",[349,1317,376],{"class":359},[349,1319,1320],{"class":351,"line":379},[349,1321,394],{"class":359},[322,1323,1324],{},[398,1325],{"alt":1326,"src":1327},"Flexbox order","\u002Fimages\u002F20201025_07.jpg",[326,1329,1330],{"id":1330},"垂直置中範例",[322,1332,1333],{},"當時留下來的一個 Loading 區塊範例：",[340,1335,1339],{"className":1336,"code":1337,"language":1338,"meta":345,"style":345},"language-scss shiki shiki-themes github-light github-dark-default",".loading-box {\n  position: relative;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 100%;\n\n  .loading-area {\n    position: relative;\n    display: flex;\n    align-items: center;\n    flex-grow: 1;\n  }\n}\n","scss",[332,1340,1341,1348,1360,1375,1385,1396,1410,1417,1425,1437,1449,1461,1473,1479],{"__ignoreMap":345},[349,1342,1343,1346],{"class":351,"line":352},[349,1344,1345],{"class":355},".loading-box",[349,1347,360],{"class":359},[349,1349,1350,1353,1355,1358],{"class":351,"line":363},[349,1351,1352],{"class":366},"  position",[349,1354,370],{"class":359},[349,1356,1357],{"class":366},"relative",[349,1359,376],{"class":359},[349,1361,1362,1365,1367,1370,1373],{"class":351,"line":379},[349,1363,1364],{"class":366},"  width",[349,1366,370],{"class":359},[349,1368,1369],{"class":366},"100",[349,1371,1372],{"class":1099},"%",[349,1374,376],{"class":359},[349,1376,1377,1379,1381,1383],{"class":351,"line":391},[349,1378,367],{"class":366},[349,1380,370],{"class":359},[349,1382,373],{"class":366},[349,1384,376],{"class":359},[349,1386,1388,1390,1392,1394],{"class":351,"line":1387},5,[349,1389,753],{"class":366},[349,1391,370],{"class":359},[349,1393,834],{"class":366},[349,1395,376],{"class":359},[349,1397,1399,1402,1404,1406,1408],{"class":351,"line":1398},6,[349,1400,1401],{"class":366},"  min-height",[349,1403,370],{"class":359},[349,1405,1369],{"class":366},[349,1407,1372],{"class":1099},[349,1409,376],{"class":359},[349,1411,1413],{"class":351,"line":1412},7,[349,1414,1416],{"emptyLinePlaceholder":1415},true,"\n",[349,1418,1420,1423],{"class":351,"line":1419},8,[349,1421,1422],{"class":355},"  .loading-area",[349,1424,360],{"class":359},[349,1426,1428,1431,1433,1435],{"class":351,"line":1427},9,[349,1429,1430],{"class":366},"    position",[349,1432,370],{"class":359},[349,1434,1357],{"class":366},[349,1436,376],{"class":359},[349,1438,1440,1443,1445,1447],{"class":351,"line":1439},10,[349,1441,1442],{"class":366},"    display",[349,1444,370],{"class":359},[349,1446,373],{"class":366},[349,1448,376],{"class":359},[349,1450,1452,1455,1457,1459],{"class":351,"line":1451},11,[349,1453,1454],{"class":366},"    align-items",[349,1456,370],{"class":359},[349,1458,404],{"class":366},[349,1460,376],{"class":359},[349,1462,1464,1467,1469,1471],{"class":351,"line":1463},12,[349,1465,1466],{"class":366},"    flex-grow",[349,1468,370],{"class":359},[349,1470,992],{"class":366},[349,1472,376],{"class":359},[349,1474,1476],{"class":351,"line":1475},13,[349,1477,1478],{"class":359},"  }\n",[349,1480,1482],{"class":351,"line":1481},14,[349,1483,394],{"class":359},[322,1485,1486],{},"父層使用：",[340,1488,1490],{"className":342,"code":1489,"language":344,"meta":345,"style":345},"flex-direction: column;\n",[332,1491,1492],{"__ignoreMap":345},[349,1493,1494,1496],{"class":351,"line":352},[349,1495,664],{"class":787},[349,1497,1498],{"class":359},": column;\n",[322,1500,1501],{},"讓內容垂直排列。",[322,1503,1504,1507],{},[332,1505,1506],{},".loading-area"," 再透過：",[340,1509,1511],{"className":342,"code":1510,"language":344,"meta":345,"style":345},"display: flex;\nalign-items: center;\nflex-grow: 1;\n",[332,1512,1513,1518,1525],{"__ignoreMap":345},[349,1514,1515],{"class":351,"line":352},[349,1516,1517],{"class":359},"display: flex;\n",[349,1519,1520,1522],{"class":351,"line":363},[349,1521,328],{"class":787},[349,1523,1524],{"class":359},": center;\n",[349,1526,1527,1529],{"class":351,"line":379},[349,1528,966],{"class":787},[349,1530,1531],{"class":359},": 1;\n",[322,1533,1534],{},"讓區塊填滿剩餘空間，並將內容在交錯軸上置中。",[326,1536,1538],{"id":1537},"_2026-年後記","2026 年後記",[322,1540,1541],{},"這篇是 2020 年學習 Flexbox 時留下來的筆記。",[322,1543,1544,1545,1547,1548,1547,1550,1547,1552,1547,1554,1547,1556,698,1558,1560],{},"Flexbox 到現在仍然是 CSS 版面配置非常常用的方式，這篇記錄的 ",[332,1546,664],{},"、",[332,1549,670],{},[332,1551,676],{},[332,1553,328],{},[332,1555,966],{},[332,1557,1031],{},[332,1559,1070],{}," 等屬性也仍然適用。",[322,1562,1563,1564,1566,1567,1569,1570,1572],{},"整理舊文時修正了幾個當時筆記中的錯誤，例如 ",[332,1565,966],{}," 的名稱、",[332,1568,373],{}," 的初始值，以及 ",[332,1571,725],{}," 的排列方向，其他內容則保留作為當時的 Flexbox 學習紀錄。",[340,1574,1576],{"className":1575,"code":345,"language":815},[813],[332,1577,345],{"__ignoreMap":345},[1579,1580,1581],"style",{},"html pre.shiki code .syv4q, html code.shiki .syv4q{--shiki-default:#6F42C1;--shiki-dark:#79C0FF}html pre.shiki code .szmH1, html code.shiki .szmH1{--shiki-default:#24292E;--shiki-dark:#E6EDF3}html pre.shiki code .sPgVT, html code.shiki .sPgVT{--shiki-default:#005CC5;--shiki-dark:#79C0FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sXQ1o, html code.shiki .sXQ1o{--shiki-default:#22863A;--shiki-dark:#7EE787}html pre.shiki code .sDgYj, html code.shiki .sDgYj{--shiki-default:#D73A49;--shiki-dark:#FF7B72}",{"title":345,"searchDepth":379,"depth":379,"links":1583},[1584,1591,1592,1593,1594,1600,1605,1606,1607,1608,1609,1610,1611],{"id":328,"depth":363,"text":328,"children":1585},[1586,1587,1588,1589,1590],{"id":338,"depth":379,"text":338},{"id":404,"depth":379,"text":404},{"id":448,"depth":379,"text":448},{"id":492,"depth":379,"text":492},{"id":536,"depth":379,"text":536},{"id":580,"depth":363,"text":580},{"id":623,"depth":363,"text":624},{"id":690,"depth":363,"text":690},{"id":664,"depth":363,"text":664,"children":1595},[1596,1597,1598,1599],{"id":725,"depth":379,"text":725},{"id":793,"depth":379,"text":793},{"id":834,"depth":379,"text":834},{"id":799,"depth":379,"text":799},{"id":670,"depth":363,"text":670,"children":1601},[1602,1603,1604],{"id":875,"depth":379,"text":875},{"id":769,"depth":379,"text":769},{"id":870,"depth":379,"text":870},{"id":966,"depth":363,"text":966},{"id":1031,"depth":363,"text":1031},{"id":1070,"depth":363,"text":1070},{"id":1142,"depth":363,"text":1143},{"id":1261,"depth":363,"text":1261},{"id":1330,"depth":363,"text":1330},{"id":1537,"depth":363,"text":1538},false,"md",null,{},"2020-10-25",[],{"title":23,"description":24},"posts\u002F20201025.flexbox-notes",[26,27,28],"2026-08-10","fso6M1rNI2T0-lephf06okDVvUEmxEEuZluBDyiJcpo",[1624,1627],{"title":31,"path":30,"stem":1625,"description":32,"category":16,"publishedAt":1626,"children":-1},"posts\u002F20230301.screen-orientation-api","2023-03-01",{"title":14,"path":13,"stem":1628,"description":15,"category":16,"publishedAt":1629,"children":-1},"posts\u002F20200419.js-prototype-inheritance","2020-04-19",1791786901601]