技術 無職轉生～在資工系就拿出真本事٩(๑•̀ω•́๑)۶【Flutter Go in 30 Days】：Day21 等等，先讓我們談談Flutter佈局: Common layout widgets(上)

參、Common layout widgets 接續在Basic Widgets後，我們將介紹一些常用於「佈局」的元件，主要分為兩種，Standard widg...

技術 Day 7 : HTML - 上下左右！如何用Flex的屬性去控制grid？

這篇想和大家聊聊，如何用Flex的相關屬性控制CSS grid的排列位置和Flex能用的屬性大致上一樣，但多了justify-self和justify-cont...

技術 Day 6 : HTML - 網頁排版超強神器part_2，CSS grid到底是什麼？

上篇介紹了CSS Flex，這篇想來聊聊CSS grid到底是什麼東西 這裡想先給大家一個觀念:Flex和grid它們並不是死對頭，它們是「好戰友」它們的出現是...

技術 DAY5 速談flex gride布局、定位、響應式

為了加快進度，我要快速帶過flex、gride布局、定位和響應式，幫你繫個安全戴，要飆車囉~~ flex : 學習方法→邊玩蛙蛙回家，邊看連結2的說明 遊...

技術 [Day 29] 還在吵架的 subgrid

Grid 與 subgrid subgrid 是一種很奇妙的跨維度設定，在 w3c 當中有詳細解釋。我這邊稍微提一下他到底是什麼樣的概念。 遵從父層格線系統，...

技術 [Day 27] 所以說那個手機版

Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ 我認真說，如果你是 AWD...

技術 [Day 26] RWD 的難題 Part 3

從手機版到桌機版 講完一些基礎的 Media Query 之後，我們來看看全部都放在一起的一些情況。單就我們 前幾天 提到的狀況，在那個 .sidebar 屬於...

技術 怎樣也不會失手的 Bootstrap 格線運用技巧

Bootstrap 令人稱羨的其中之一就是它的格線系統，不僅易用且符合網頁視覺設計概念。雖說如此，在官網文件 落落長的文件還是令許多開發者不知如何快速上手，本篇...

技術 [Day 23] 實際操作 Part 5

從手機版開始 昨天提到了百分比需要留意的地方，那麼，如果我們依舊使用 ch 為單位的時候，是否需要留意這些尺寸斷點的問題？ 要。 所以，我們該怎麼計算這種狀...

技術 [Day 22] 實際操作 Part 4

從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度...

技術 [Day 21] 實際操作 Part 3

從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大...

技術 [Day 19] 實際操作 Part 1

從手機版開始 我們今天來講一個比較古老的排版方式，除了天地之間講幹話之外，中間通常還會有一個靠北邊，或是靠南邊的側邊欄。所以我們可以快速的把框架先拉出來。 我...

技術 [Day 16] 這不是 Media Query

Media Query 這件事情應該是講到爛掉了，我們稍微複習一下就好， @media (min-width: 32rem) {} 收工（欸）！ 爾或者是...

技術 [Day 15] Grid 格線系統 Part 5

關於自動這件事 我們昨天有提到 dense 這件事情，我們今天繼續腦補一下這個東西該怎麼把玩。首先，先以一個簡單的例子來開場，這是沒有使用 dense 的設定所...

技術 [Day 14] Grid 格線系統 Part 4

對齊與補白 基本上在格線系統當中，對齊跟補白這兩件事情跟 Flex 大同小異。所以這個段落基本上到這邊就可以結束了（欸不是）。對齊系列基本上可用的有， 屬...

技術 [Day 13] Grid 格線系統 Part 3

間隔、間隔、間隔 先不囉唆，上圖。 中間看起來比較密集的部分，就是所謂的 間隔，在樣式表當中就是這樣設定， .grid { display: grid...

技術 [Day 11] Grid 格線系統 Part 1

概述 我們再重新複習一下， Grid for layout, Flex for component. 格線系統的發展從 2011 年開始，一直到 2016...