Flexbox

[CSS] Flex/Grid Layout Modules, part 0

4 min read CSSGrid LayoutGrid SystemFlexbox鐵人賽2021
> 萬事起頭難，只要不起頭，就一點都不難了。 在這個充滿著 CSS Frameworks 的年代，人人有功練，人人有版切，身為老屁股的我只能在沙灘上曬乾，而且還賣不到錢。 鐵人賽就當作自己還有在喘氣的證明。 -------------------------------------------------------------------------------- 前言 其實寫 CSS 框架應該比較多觀眾，但就一個碼農來說，自己動手做會比較有趣一點。而且那些框架實在有點五花八門，就是你去 Google 一些關鍵字，諸如「超好用」「XX 天就上手」「20XX 熱門框架」然後就會跑出一堆。 > 我沒有阻止你用，只要能賺錢的框架就是好框架。 君不見

[12th 鐵人賽] 所以說那個手機版, Day 27

4 min read CSSCSS Media Query Level 4Media QueryRWDAWDGrid LayoutGrid SystemFlexbox
Grid 還是 Flex 我們回歸到行動裝置本身，究竟我們在前端設計的時候，要採用 Grid 還是 Flex 來製作所謂的手機版？ > 我認真說，如果你是 AWD 的話，用 Flex 就綽綽有餘。 如果你是採用 RWD 的話，用 Grid 或許比較方便。 當然，這些事情沒有一定的準則，不然你看看大家 Bootstrap 還不是用得很快樂，有人在意他到底是 Grid 還是 Flex 嗎？

[12th 鐵人賽] RWD 的難題 Part 1, Day 24

2 min read CSSITHome鐵人賽2020Grid LayoutGrid SystemCSS Media Query Level 4Media QueryFlexbox
尺寸 對於 RWD 的設計來說，通常最大的問題點在於，你到底要相容多少尺寸，抑或，到底你的業主的窗口的主管的老婆的手機型號到底要不要考慮進去？ > 通常是不會。 我們在設計所謂的「手機版」跟「桌機版」的情況下，基本上會留下一些能夠相容的尺寸，例如說，從最小的 320px 一直到 414px 會是一種版本，然後到了 600px 直到 768px 會是一種版本，再往上 1024px 到 1200px 會是一種，接著 1200px

[12th 鐵人賽] 實際操作 Part 4, Day 22

3 min read CSSITHome鐵人賽CSS3Grid LayoutGrid SystemMedia QueryFlexbox
從手機版開始 還記得昨天的狀況嗎？那個 33% 為何會發生這樣的事情？這件事情在小尺寸基本上一定會發生，就端看你剩下的 1% 是不是跟 grid-gap 的寬度 _剛好一樣_，如果是的話，就不會有昨天那個情況。 差別在於那個 grid-template-column 基本上不會計算 grid-gap 的尺寸，所以當你用百分比定義的時候，他是參考整個容器的尺寸來做定義，所以，你就算設定加起來剛好，還是會因為 grid-gap 的關係然後爆掉。 當然是有解法的， grid-template-columns: repeat(auto-fit, [body] calc((100%

[12th 鐵人賽] 實際操作 Part 3, Day 21

4 min read CSSITHome鐵人賽Grid LayoutGrid SystemFlexboxMedia Query
從手機版開始 好的，今天我們來聊一下關於 .context-wrapper 裡面的事情。這個容器我們還是定義成 Grid 的容器，所以這邊我們會準備一些內容，大抵上就當作一個文章內容來看看這個區塊。 首先，我們在 .context-wrapper 稍微調整了一下定義， .context-wrapper { display: grid; grid-template-columns: repeat(auto-fit, [body] minmax(40ch, 1fr) [end]); grid-gap: 1rem; grid-column: 1 / 3; } 好的，這樣基本上他會在手機版上面是單一個欄然後逐行顯示我們的內容，這時候針對內文的文字也約略調整一下。